Tên lớp động bên trong ngClass ở góc 2

Tôi cần nội suy một giá trị bên trong một ngClassbiểu thức nhưng tôi không thể làm cho nó hoạt động.

Tôi đã thử những giải pháp này, những giải pháp duy nhất có ý nghĩa đối với tôi, hai giải pháp này không thành công với phép nội suy:

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

Cái này hoạt động với phép nội suy nhưng không thành công với lớp được thêm động vì toàn bộ chuỗi được thêm vào dưới dạng một lớp:

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

Vì vậy, câu hỏi của tôi là làm thế nào để bạn sử dụng các tên lớp động ngClassnhư thế này?

Thử

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

thay thế.

hoặc là

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

hoặc thậm chí

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

sẽ hoạt động nhưng lợi ích bổ sung của việc sử dụng ngClass là nó không ghi đè lên các lớp khác được thêm vào bởi bất kỳ phương thức nào khác (ví dụ: [class.xyz]chỉ thị hoặc classthuộc tính, v.v.) class.

Cập nhật Angular 9

Trình biên dịch mới, Ivy, mang lại sự rõ ràng và dễ đoán hơn về những gì sẽ xảy ra khi có các loại ràng buộc lớp khác nhau trên cùng một phần tử. Đọc thêm về nó ở đây.

ngClass nhận ba loại đầu vào

• Đối tượng: mỗi khóa tương ứng với một tên lớp CSS, bạn không thể có các khóa động, vì key 'key' "key"tất cả đều giống nhau và [key]không được hỗ trợ AFAIK.
• Mảng: chỉ có thể chứa danh sách các lớp, không có điều kiện, mặc dù toán tử bậc ba hoạt động
• Chuỗi / biểu thức: giống như thuộc tính lớp bình thường

Cái này sẽ hoạt động

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

nhưng Angular ném vào cú pháp này. Tôi coi đây là một lỗi. Xem thêm https://stackoverflow.com/a/36024066/217408

Những người khác không hợp lệ. Bạn không thể sử dụng []cùng với {{}}. Hoặc cái này hay cái khác. {{}}liên kết kết quả được xâu chuỗi không dẫn đến kết quả mong muốn trong trường hợp này vì một đối tượng cần được chuyển đến ngClass.

Ví dụ về Plunker

Như cách giải quyết khác, cú pháp được hiển thị bởi @A_Sing hoặc

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

có thể được sử dụng.

Đây là một ví dụ về điều gì đó tôi đang làm cho nhiều lớp với nhiều điều kiện :

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

trong đó:
classeslà một đối tượng chứa các chuỗi của các tên lớp khác nhau. ví dụclass.icon.large = "app__icon--large"

Nó năng động! Cập nhật khi các điều kiện cập nhật.

tôi muốn đề cập đến một số điểm quan trọng cần ghi nhớ trong khi thực hiện ràng buộc lớp.

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

lớp ở đây không ràng buộc chính xác vì một điều kiện phải được đáp ứng, trong khi bạn có hai lớp giống hệt nhau 'cảnh báo huy hiệu' có thể có hai điều kiện khác nhau. Để sửa lỗi này

 [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>

Bạn có thể dùng <i [className]="'fa fa-' + data?.icon"> </i>