Thuộc tính ràng buộc với thuộc tính nội suy

Question

Tôi đã đọc một bài viết về sự khác biệt giữa các thuộc tính và ràng buộc thuộc tính. Từ những gì tôi hiểu, hầu hết thời gian, Angular2 thích ràng buộc tài sản, vì sau mỗi thay đổi trong dữ liệu, DOM sẽ được cập nhật. (Nếu tôi nhầm, hãy sửa tôi).

Tôi có một thành phần tùy chỉnh và sử dụng nó từ thành phần gốc. Trong đó, tôi có một số @Input có tên truevalue. khi tôi bắt đầu truevalue từ phụ huynh thông qua liên kết thuộc tính, đôi khi, nó không thay đổi. Tôi sử dụng đoạn mã sau:

<my-checkbox [(ngModel)]="chkItems" [disabled]="!editMode" [trueValue]="Y"></my-checkbox> 

Nếu tôi gửi true hoặc "1" vào trueValue nó hoạt động, nhưng nếu tôi gửi "Y" hoặc "YES", nó không hoạt động. Vì vậy, tôi buộc phải sử dụng thuộc tính ràng buộc. Tôi không biết vấn đề là gì.

Tôi đã thay đổi nó, như sau:

<my-checkbox [(ngModel)]="chkItems" [disabled]="!editMode" trueValue="Y"></my-checkbox> 

Cảm ơn trước

Answer 1

Giả sử my-checkbox là thành phần chọn tùy chỉnh của bạn và bạn đang sử dụng này trong thành phần cha mẹ của bạn. Khi bạn có trueValue là @Input thuộc tính trên thành phần tùy chỉnh của bạn, để sử dụng nó trong thành phần cha Y phải đánh giá một số value mà nó làm trong trường hợp 1 (tương đương với true).

Đối với thuộc tính ràng buộc để hoạt động, nó phải đánh giá một giá trị. "CÓ" hoặc "Y" là chuỗi giá trị chỉ đó sẽ không được đánh giá, trừ khi bạn làm điều gì đó như:

export class ParentComponent` { 
     Y = "YES"; // <--or "Y" 
    } 

và sau đó hiển thị trueValue sử dụng interpolation trong thành phần tùy chỉnh của bạn như {{trueValue}}

điều khác cần lưu ý là khi bạn sử dụng nội suy tức là {{}}, nó luôn chuyển đổi giá trị thành .toString() trước khi liên kết.

Answer 2

tài sản ràng buộc như

[trueValue]="..." 

đánh giá biểu thức "..." và gán giá trị

"true" đánh giá với giá trị true "Y" là không rõ. Không có giá trị nội bộ Y trong TypeScript và không có thuộc tính trong cá thể lớp thành phần, đó là phạm vi của ràng buộc mẫu. Trong trường hợp này bạn sẽ muốn

[trueValue]="'Y'" 

Lưu ý các dấu ngoặc kép bổ sung để làm Y một chuỗi.

thuộc tính Plain cũng được giao nhiệm vụ đầu vào

trueValue="Y" 

là HTML đơn giản mà không cần bất kỳ Angular2 ràng buộc và giá trị thuộc tính luôn dây. Do đó, điều này sẽ gán chuỗi Y.

Một cách khác là chuỗi suy

trueValue="{{true}}" 

sẽ gán giá trị "true" (như string) vì biểu thức withing {{...}} sẽ được đánh giá và sau đó chuyển đổi thành một chuỗi trước khi truyền cho các đầu vào. Điều này không thể được sử dụng để ràng buộc các giá trị khác so với chuỗi.

Để ràng buộc rõ ràng để một thuộc tính thay vì một tài sản mà bạn có thể sử dụng (ngoài trueValue="Y" mà tạo ra một thuộc tính nhưng không làm bất cứ đánh giá)

[attr.trueValue]="'Y'" 

hoặc

attr.trueValue="{{'Y'}}" 

Thuộc tính ràng buộc là hữu ích nếu bạn muốn sử dụng thuộc tính trueValue để giải quyết phần tử có bộ chọn CSS.

Answer 3

Về mặt kỹ thuật, có 3 cách để liên kết các thuộc tính.

1. Nội suy chuỗi - {{expression}} - hiển thị giá trị giới hạn từ mẫu thành phần và chuyển đổi biểu thức này thành chuỗi.

2. Gắn kết thuộc tính - [target] = "expression" - thực hiện điều tương tự bằng cách hiển thị giá trị từ thành phần đến mẫu, nhưng nếu bạn muốn ràng buộc biểu thức khác với chuỗi (ví dụ - boolean), thì thuộc tính Ràng buộc là lựa chọn tốt nhất.

3. bind-target = "expression" - Đây không phải là cách sử dụng thông thường.

Luôn quyết định sử dụng tùy chọn phù hợp với trường hợp sử dụng của bạn.

Answer 4

Khi hiển thị giá trị dữ liệu dưới dạng chuỗi, không có lý do kỹ thuật nào để thích biểu mẫu này sang biểu mẫu khác.

Nếu chúng ta muốn giá trị dữ liệu như boolean hoặc khác hơn là chuỗi sau đó chúng ta nên đi cho tài sản gắn

Answer 5

Tôi đã hiểu từ câu sau

Đầu tiên tôi sẽ giải thích một chút về html thuộc tính và dom tài sản

1. thuộc tính được định nghĩa bởi html trong khi các thuộc tính được xác định bởi DOM
2. Thuộc tính khởi tạo thuộc tính DOM.Khi công việc hoàn thành thuộc tính khởi được thực hiện
3. Thuộc tính giá trị có thể thay đổi trong khi gán giá trị không thể thay đổi

Ví dụ

<input id="idInput" type="text" value="xyz"></input> 

Trong giao diện điều khiển của trình duyệt nếu chúng ta gõ

idInput.getAttribute (' value ') // giá trị thuộc tính cho xyz

id Input.value giá trị // bất động sản cũng cho xyz

nếu chúng ta thay đổi văn bản đầu vào trong texbox để tyz

idInput.getAttribute ('giá trị') // giá trị thuộc tính cho xyz

idInput.value giá trị // bất động sản cũng cho tyz

loại Bây giờ khác nhau của ràng buộc trong góc

Chuỗi Interpolation {{name}}

1. Interpolation là một cú pháp đặc biệt mà chuyển đổi góc thành một tài sản gắn
2. Để nối đốt chúng ta phải sử dụng phép nội suy thay vì tài sản gắn
3. Để đặt thuộc tính phần tử thành giá trị dữ liệu không dây, bạn phải liên kết thuộc tính

Binding thuộc tính [disabled] = "name" Tại đây [disabled] là thuộc tính của DOM. Không tìm thấy thuộc tính Disabled trong html.

Thuộc tính Binding attr.colspan = "{{colspanval}}" Khi thuộc tính tương ứng với thuộc tính không tồn tại ví dụ colspan không có tương ứng dom tài sản như vậy thuộc tính ràng buộc là bắt buộc. Lỗi ném trong bảng điều khiển nếu chúng tôi cố gắng sử dụng colspan = "{{cospanval}}" sử dụng thuộc tính ràng buộc