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

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

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

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

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

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

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

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ố

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à

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

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

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ì

Lưu ý rằng

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à

if (val >= 0 && val <= 5) {
  return 'low';
} else if (val >= 6 && val <= 10) {
  return 'medium';
} else {
  return 'high'
}

Như đã đề cập ở trên, chúng ta không thể sử dụng câu lệnh

if (val >= 0 && val <= 5) {
  return 'low';
} else if (val >= 6 && val <= 10) {
  return 'medium';
} else {
  return 'high'
}

if (val >= 0 && val <= 5) {
  return 'low';
} else if (val >= 6 && val <= 10) {
  return 'medium';
} else {
  return 'high'
}

if (val >= 0 && val <= 5) {
  return 'low';
} else if (val >= 6 && val <= 10) {
  return 'medium';
} else {
  return 'high'
}

if (val >= 0 && val <= 5) {
  return 'low';
} else if (val >= 6 && val <= 10) {
  return 'medium';
} else {
  return 'high'
}

class MyComponent {
  getClassOf(val) {
    if (val >= 0 && val <= 5) {
      return 'low';
    } else if (val > 5 && val <= 10) {
      return 'medium';
    } else {
      return 'high'
    }
  }
}

Càng xa càng tốt. Nhưng tôi muốn chỉ ra rằng điều này thực sự không lý tưởng. Tóm lại, do cách thức hoạt động của

if (val >= 0 && val <= 5) {
  return 'low';
} else if (val >= 6 && val <= 10) {
  return 'medium';
} else {
  return 'high'
}

if (val >= 0 && val <= 5) {
  return 'low';
} else if (val >= 6 && val <= 10) {
  return 'medium';
} else {
  return 'high'
}

Điều đó nằm ngoài chủ đề của bài viết này, nhưng bạn có thể xem bài viết này nếu bạn muốn biết thêm

Chúng tôi vẫn có thể đạt được kết quả tương tự mà không cần sử dụng

if (val >= 0 && val <= 5) {
  return 'low';
} else if (val >= 6 && val <= 10) {
  return 'medium';
} else {
  return 'high'
}

Có vẻ hơi dài dòng. Hãy xem xét rằng sẽ chỉ có một lớp được áp dụng cho phần tử, vì vậy nếu chúng ta có thể biến đổi

Và tất cả những gì chúng ta cần làm trong mẫu là

Có một số trường hợp chúng ta có thể sử dụng mảng. Xét quan hệ ánh xạ sau

Điều này có nghĩa là đối với một

class MyComponent {
  getClassOf(val) {
    if (val >= 0 && val <= 5) {
      return 'low';
    } else if (val > 5 && val <= 10) {
      return 'medium';
    } else {
      return 'high'
    }
  }
}

class MyComponent {
  getClassOf(val) {
    if (val >= 0 && val <= 5) {
      return 'low';
    } else if (val > 5 && val <= 10) {
      return 'medium';
    } else {
      return 'high'
    }
  }
}

class MyComponent {
  getClassOf(val) {
    if (val >= 0 && val <= 5) {
      return 'low';
    } else if (val > 5 && val <= 10) {
      return 'medium';
    } else {
      return 'high'
    }
  }
}

class MyComponent {
  getClassOf(val) {
    if (val >= 0 && val <= 5) {
      return 'low';
    } else if (val > 5 && val <= 10) {
      return 'medium';
    } else {
      return 'high'
    }
  }
}

class MyComponent {
  getClassOf(val) {
    if (val >= 0 && val <= 5) {
      return 'low';
    } else if (val > 5 && val <= 10) {
      return 'medium';
    } else {
      return 'high'
    }
  }
}

Một sự thật thú vị là trong ECMAScript, một mảng chỉ là một đối tượng với khá nhiều thuộc tính và phương thức bổ sung. Vì vậy, bạn cũng có thể làm như trên với một đối tượng

Lưu ý rằng bạn cũng có thể đạt được điều trên với các toán tử bậc ba lồng nhau, đây là điều mà tôi luôn cố gắng tránh

[ngClass] so với [class] trong Góc

Trước khi chúng tôi kết thúc, một điều đáng nói là ký hiệu

Phần kết luận

Cảm ơn vì đã đọc. Hy vọng bây giờ bạn đã biết cách thức hoạt động của

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

Xing Liu

Đọc thêm bài viết

Nếu bài viết này hữu ích, hãy tweet nó

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

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

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

Làm cách nào để truy cập lớp CSS trong TypeScript?

Làm cách nào để thêm lớp CSS dựa trên điều kiện trong Angular?

Reply 8 0 Chia sẻ