Làm thế nào để thêm thuộc tính có điều kiện trong Angular 2?

Làm thế nào tôi có thể thêm một cách có điều kiện một thuộc tính phần tử, ví dụ như checkedhộp kiểm?

Các phiên bản trước của Angular đã có NgAttrvà tôi nghĩ NgCheckedtất cả dường như cung cấp chức năng mà tôi theo sau. Tuy nhiên, các thuộc tính này dường như không tồn tại trong Angular 2 và tôi thấy không có cách nào khác để cung cấp chức năng này.

null loại bỏ nó:

[attr.checked]="value ? '' : null"

hoặc là

[attr.checked]="value ? 'checked' : null"

Dấu:

Thuộc tính vs tài sản

Khi phần tử HTML nơi bạn thêm liên kết này không có thuộc tính với tên được sử dụng trong liên kết ( checkedtrong trường hợp này) và cũng không có thành phần hoặc lệnh Angular nào được áp dụng cho cùng một phần tử có @Input() checked;, sau đó[xxx]="..." không thể được sử dụng.

Xem thêm Sự khác biệt giữa các thuộc tính và thuộc tính trong HTML là gì?

Liên kết gì khi không có tài sản đó

Lựa chọn thay thế là [style.xxx]="...", [attr.xxx]="...", [class.xxx]="..."tùy thuộc vào những gì bạn cố gắng để đạt được.

Bởi vì <input>chỉ có một checkedthuộc tính, nhưng không có checkedtài sản [attr.checked]="..."là con đường phù hợp với trường hợp cụ thể này.

Các thuộc tính chỉ có thể xử lý các giá trị chuỗi

Một cạm bẫy phổ biến cũng là đối với [attr.xxx]="..."các ràng buộc, giá trị ( ...) luôn được xâu chuỗi. Chỉ các thuộc tính và @Input()s mới có thể nhận các loại giá trị khác như boolean, number, object, ...

Phần lớn thuộc tính và thuộc tính của các yếu tố được kết nối và có cùng tên.

Kết nối thuộc tính thuộc tính

Khi bị ràng buộc với thuộc tính, thuộc tính cũng chỉ nhận được giá trị chuỗi từ thuộc tính.
Khi bị ràng buộc với thuộc tính, thuộc tính nhận giá trị được liên kết với nó (boolean, number, object, ...) và thuộc tính lại giá trị được xâu chuỗi.

Hai trường hợp tên thuộc tính và thuộc tính không khớp.

• Lỗi trong khi thêm thuộc tính "for" vào nhãn trong mẫu 2.0 góc

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelEuity/htmlFor (xem câu đầu tiên của mô tả htmlFor property reflects the value of the for- forcó thể không hoạt động vì đó là từ khóa trong C hoặc JavaScript)

• Tại sao colspan không phải là một thuộc tính bản địa được biết đến trong Angular 2?

Angular đã được thay đổi kể từ đó và biết về những trường hợp đặc biệt này và xử lý chúng để bạn có thể liên kết với <label [for]="mặc dù không có tài sản nào như vậy tồn tại (tương tự colspan)

trong cú pháp thuộc tính angular-2 là

<div [attr.role]="myAriaRole">

Đóng vai trò thuộc tính cho kết quả của biểu thức myAriaRole.

vì vậy có thể sử dụng như

[attr.role]="myAriaRole ? true: null"

Tinh chỉnh câu trả lời của Günter Zöchbauer:

Điều này dường như là khác nhau bây giờ. Tôi đã cố gắng làm điều này để áp dụng có điều kiện một thuộc tính href cho thẻ neo. Bạn phải sử dụng không xác định cho trường hợp 'không áp dụng'. Ví dụ, tôi sẽ chứng minh bằng một liên kết có điều kiện áp dụng thuộc tính href.

Thẻ neo không có thuộc tính href trở thành văn bản thuần túy, biểu thị một trình giữ chỗ cho một liên kết, theo thông số siêu liên kết .

Đối với điều hướng của tôi, tôi có một danh sách các liên kết, nhưng một trong những liên kết đó đại diện cho trang hiện tại. Tôi không muốn liên kết trang hiện tại là một liên kết, nhưng vẫn muốn nó xuất hiện trong danh sách (nó có một số kiểu tùy chỉnh, nhưng ví dụ này được đơn giản hóa).

<a [attr.href]="currentUrl !== link.url ? link.url : undefined">

Điều này sạch hơn so với sử dụng hai * ngNếu trên thẻ span và neo, tôi nghĩ vậy.

Nếu đó là một yếu tố đầu vào, bạn có thể viết một cái gì đó như .... <input type="radio" [checked]="condition">Giá trị của điều kiện phải đúng hoặc sai.

Ngoài ra đối với thuộc tính kiểu ... <h4 [style.color]="'red'">Some text</h4>

bạn có thể sử dụng cái này

<span [attr.checked]="val? true : false"> </span>

Bạn có thể sử dụng một cách tiếp cận tốt hơn cho ai đó viết HTML cho một scss đã tồn tại.
html

[attr.role]="<boolean>"

scss

[role = "true"] { ... }

Theo cách đó, bạn không cần phải luôn <boolean> ? true : nullluôn như vậy.

Ở đây, đoạn văn chỉ được in 'isValid' là đúng / nó chứa bất kỳ giá trị nào

<p *ngIf="isValid ? true : false">Paragraph</p>

Tôi muốn có tooltip chỉ cho một lĩnh vực cụ thể như thêm dưới đây trong mã nhưng bạn muốn có tooltip trên multiplent bạn có thể có một valdidate mảng sử dụng:

Nhiều yếu tố có thuộc tính data-tooltip tùy chỉnh :

1: [ 'key1ToHaveTooltip', `key2ToHaveTooltip ']. Bao gồm (khóa)

2: ['key1ToHaveTooltip', 'key2ToHaveTooltip']. IndexOf (khóa)> -1

để có thuộc tính tooltip trên hơn 1 phần tử.

   <div *ngFor="let key of Keys"
             [attr.data-tooltip]="key === 'IwantOnlyThisKeyToHaveTooltipAttribute' 
                                           ? 'Hey! I am a tooltip on key matched'
                                           : null">
   </div>

Inline-Maps cũng tiện dụng.

Chúng rõ ràng hơn một chút và cũng dễ đọc hơn.

[class]="{ 'true': 'active', 'false': 'inactive', 'true&false': 'some-other-class' }[ trinaryBoolean ]"

Chỉ là một cách khác để thực hiện điều tương tự, trong trường hợp bạn không thích cú pháp tạm thời hoặc ngIfs (vv).