Làm cách nào để thêm lớp CSS trong Angular ts?

8 là một lệnh trong Angular bổ sung và loại bỏ các lớp CSS trên một phần tử HTML. Trong bài viết này, chúng ta chỉ nói về

8 trong Angular, không phải

0 trong angular. js

Điều kiện tiên quyết – Ràng buộc thuộc tính là gì?

Hai điều đầu tiên chúng ta phải hiểu là liên kết và nội suy thuộc tính trong Angular. Hãy lấy thuộc tính

1 của

2 làm ví dụ

Hãy xem xét đoạn mã sau

Cho rằng chúng ta đã xác định

3 trong thành phần, thì tất cả các đoạn mã trên sẽ thực hiện chính xác điều tương tự

Tôi sẽ coi phép nội suy [_______2_______4] là một

5. Và ràng buộc thuộc tính chỉ là một cách ít dài dòng hơn để đạt được điều tương tự. Cá nhân, tôi sử dụng ràng buộc thuộc tính nhiều nhất có thể

ngClass trong góc là gì?

Khi nói đến

8, nó hỗ trợ ba loại biểu thức "trả về giá trị".

7,

8 và

9. Đây là một ví dụ từ

Tất cả các phần tử

{{ val }}

0 ở trên đều có hai lớp.

{{ val }}

1 và

{{ val }}

2. Lưu ý rằng trong tài liệu chính thức, có một cặp dấu nháy đơn trong mỗi khóa đối tượng trong ví dụ thứ ba. Nhưng cả

{{ val }}

1 và

{{ val }}

2 đều không có dấu gạch ngang hoặc dấu cách trong đó. Vì vậy, chúng tôi có thể thoải mái loại bỏ các dấu ngoặc kép

Tuy nhiên, trong ví dụ thứ tư, vì khóa là

{{ val }}

5 [có khoảng trắng ở giữa] nên chúng ta cần thêm dấu nháy đơn

Xin lưu ý - giá trị của

8 không nhất thiết phải là số nguyên, như được hiển thị ở trên. Hãy nhớ rằng ràng buộc thuộc tính đánh giá biểu thức của nó. Vì vậy, miễn là biểu thức có thể được hiểu là

{{ val }}

7, chúng ta có thể bắt đầu

Cách sử dụng ngClass trong góc

Vậy biểu thức là gì? . Bạn có thể đã quen thuộc với các câu lệnh

0 chịu trách nhiệm về luồng điều khiển. Lưu ý rằng câu lệnh

0 không có giá trị trả về

Mặt khác, giả sử,

2 là một biểu thức [với điều kiện là

3 có giá trị như

4] và nó có "giá trị trả về" là

5

Trong ECMAScript, phép gán cũng được coi là một

{{ val }}

8 và nó có "giá trị trả về". Nhưng chúng ta không thể đặt một biểu thức gán trong liên kết thuộc tính trong Angular, điều này sẽ gây ra lỗi nói rằng "Các ràng buộc không thể chứa các phép gán"

Như đã nói, tất cả các

7 sau đây đều hợp lệ

Cách sử dụng ngClass góc với một điều kiện đơn giản

Chúng tôi không thể viết một tuyên bố

0 trong

8, do thực tế đó là một tuyên bố. Nhưng chúng ta không thể sử dụng toán tử bậc ba vì đây là một biểu thức

Ví dụ: nếu chúng tôi muốn văn bản trong một ô của bảng có lớp là

0 khi giá trị của nó lớn hơn

1 và nếu không thì nó phải có lớp là

2, đây là mã

{{ val }}

Và nếu chúng ta muốn chuyển đổi một lớp dựa trên một điều kiện, chúng ta có thể biến một trong các biểu thức thành một chuỗi rỗng

Ví dụ: nếu chúng tôi muốn thêm một lớp

3 vào một biểu mẫu khi nó không hợp lệ và xóa lớp

3 khi nó hợp lệ, chúng tôi có thể làm điều này

Nhưng có một cách ít dài dòng hơn. Hãy nhớ rằng

8 cũng hỗ trợ một đối tượng như một giá trị

Một cách khác để đạt được điều tương tự là sử dụng. Đây là lý tưởng cho một lớp duy nhất

Cách làm việc với Object Literals và ngClass

Khi chúng ta sử dụng các đối tượng theo nghĩa đen, thì

6 đại diện cho

7 mà chúng ta sẽ định cấu hình cho phần tử, trong khi

8 biểu thị liệu lớp có nên được áp dụng cho phần tử hay không

Lưu ý rằng

6 sẽ chỉ được áp dụng khi

8 là

1. Trong ví dụ trên, nếu

2 là một trong số

3,

4,

5, v.v., thì lớp của

3 sẽ không áp dụng cho phần tử

Một điều nữa cần lưu ý là cú pháp chưa được hỗ trợ. Nhưng có một vấn đề mở trong repo GitHub chính thức của Angular

Angular ngClass và điều kiện phức tạp

Nếu điều kiện không chỉ là

7 thì sao?

if [val >= 0 && val = 6 && val = 0 && val = 6 && val = 0 && val = 6 && val = 0 && val = 6 && val = 0 && val = 6 && val = 0 && val  5 && val = 0 && val = 6 && val = 0 && val = 6 && val = 0 && val = 6 && val = 0 && val  5 && val = 0 && val  5 && val = 0 && val  5 && val = 0 && val  5 && val = 0 && val  5 && val