ชื่อคลาสแบบไดนามิกภายใน ngClass ในเชิงมุม 2

ฉันต้องการแก้ไขค่าภายในngClassนิพจน์ แต่ไม่สามารถใช้งานได้

ฉันลองวิธีแก้ปัญหาเหล่านี้ซึ่งเป็นวิธีเดียวที่สมเหตุสมผลสำหรับฉันสองข้อนี้ล้มเหลวด้วยการแก้ไข:

<button [ngClass]="{'{{namespace}}-mybutton': type === 'mybutton'}"></button>
<button [ngClass]="{namespace + '-mybutton': type === 'mybutton'}"></button>

สิ่งนี้ใช้ได้กับการแก้ไข แต่ล้มเหลวกับคลาสที่เพิ่มแบบไดนามิกเนื่องจากสตริงทั้งหมดถูกเพิ่มเป็นคลาส:

<button ngClass="{'{{namespace}}-mybutton': type === 'mybutton'}"></button>

คำถามของฉันคือคุณใช้ชื่อคลาสแบบไดนามิกในngClassลักษณะนี้ได้อย่างไร

ลอง

<button [ngClass]="type === 'mybutton' ? namespace + '-mybutton' : ''"></button>

แทน.

หรือ

<button [ngClass]="[type === 'mybutton' ? namespace + '-mybutton' : '']"></button>

หรือแม้กระทั่ง

<button class="{{type === 'mybutton' ? namespace + '-mybutton' : ''}}"></button>

จะทำงาน แต่ประโยชน์พิเศษของการใช้ngClassก็คือว่ามันไม่ชั้นเรียนอื่น ๆ ไม่ได้เขียนทับที่เพิ่มขึ้นโดยวิธีการอื่นใด (เช่น[class.xyz]สั่งหรือclassแอตทริบิวต์อื่น ๆ ) เป็นclassไม่

อัปเดต Angular 9

คอมไพเลอร์ใหม่ Ivy นำเสนอความชัดเจนและความสามารถในการคาดเดามากขึ้นว่าจะเกิดอะไรขึ้นเมื่อมีการผูกคลาสประเภทต่างๆในองค์ประกอบเดียวกัน อ่านเพิ่มเติมได้ที่นี่

ngClassรับอินพุตสามประเภท

• Object:แต่ละคีย์สอดคล้องกับชื่อคลาส CSS คุณไม่สามารถมีคีย์แบบไดนามิกได้เนื่องจากkey 'key' "key"เหมือนกันทั้งหมดและ[key]ไม่รองรับ AFAIK
• Array:สามารถมีได้เฉพาะรายชื่อคลาสเท่านั้นไม่มีเงื่อนไขแม้ว่าตัวดำเนินการ ternary จะทำงาน
• สตริง / นิพจน์:เหมือนกับแอตทริบิวต์คลาสปกติ

อันนี้น่าจะใช้ได้

<button [ngClass]="{[namespace + '-mybutton']: type === 'mybutton'}"></button>

แต่ Angular พ่นไวยากรณ์นี้ ฉันจะถือว่านี่เป็นข้อบกพร่อง ดูเพิ่มเติมที่https://stackoverflow.com/a/36024066/217408

อื่น ๆ ไม่ถูกต้อง คุณไม่สามารถใช้[]ร่วมกับ{{}}. อย่างใดอย่างหนึ่ง {{}}ผูกสตริงผลลัพธ์ซึ่งไม่นำไปสู่ผลลัพธ์ที่ต้องการในกรณีนี้เนื่องจากอ็อบเจ็กต์ต้องถูกส่งไปยังngClassซึ่งไม่ได้นำไปสู่ผลลัพธ์ที่ต้องการในกรณีนี้เพราะวัตถุที่จะต้องมีการส่งผ่านไปยัง

ตัวอย่าง Plunker

วิธีแก้ปัญหาไวยากรณ์ที่แสดงโดย @A_Sing หรือ

<button [ngClass]="type === 'mybutton' ? namespace + '-mybutton' : ''"></button>

สามารถใช้ได้.

นี่คือตัวอย่างของสิ่งที่ฉันกำลังทำสำหรับหลายชั้นเรียนที่มีหลายเงื่อนไข :

[ngClass]="[variableInComponent || !anotherVariableInComponent ? classes.icon.large : classes.icon.small, editing ? classes.icon.editing : '']"

ที่อยู่:
classesเป็นวัตถุที่มีสตริงของชื่อคลาสต่างๆ เช่นclass.icon.large = "app__icon--large"

เป็นแบบไดนามิก! อัปเดตเมื่อมีการอัปเดตเงื่อนไข

ฉันต้องการพูดถึงประเด็นสำคัญบางอย่างที่ต้องคำนึงถึงในขณะที่ใช้การผูกคลาส

    [ngClass] = "{
    'badge-secondary': somevariable  === value1,
    'badge-danger': somevariable  === value1,
    'badge-warning': somevariable  === value1,
    'badge-warning': somevariable  === value1,
    'badge-success': somevariable  === value1 }" 

คลาสที่นี่ไม่มีผลผูกพันอย่างถูกต้องเนื่องจากต้องปฏิบัติตามเงื่อนไขเดียวในขณะที่คุณมี 'ป้ายเตือน' ชั้นเรียนที่เหมือนกันสองชั้นซึ่งอาจมีเงื่อนไขที่แตกต่างกันสองเงื่อนไข เพื่อแก้ไขปัญหานี้

 [ngClass] = "{
    'badge-secondary': somevariable === value1,
    'badge-danger': somevariable  === value1,
    'badge-warning': somevariable  === value1 || somevariable  === value1, 
    'badge-success': somevariable  === value1 }" 

  <div *ngFor="let celeb of singers">
  <p [ngClass]="{
    'text-success':celeb.country === 'USA',
    'text-secondary':celeb.country === 'Canada',
    'text-danger':celeb.country === 'Puorto Rico',
    'text-info':celeb.country === 'India'
  }">{{ celeb.artist }} ({{ celeb.country }})
</p>
</div>

คุณสามารถใช้ได้ <i [className]="'fa fa-' + data?.icon"> </i>