Seri Angular 6+ cơ bản Hiển thị danh sách anh hùng

// src/app/heroes/heroes.component.ts (import HEROES)

import { HEROES } from '../mock-heroes';

Trong cùng một tệp (class HeroesComponent), xác định một thuộc tính thành phần được gọi là  heroes để hiển thị mảng HEROES để liên kết.

export class HeroesComponent implements OnInit {

  heroes = HEROES;

Liệt kê heroes với * ngFor

Mở tệp mẫu HeroesComponent và thực hiện các thay đổi sau:

• Thêm một

  ở trên cùng,

• Bên dưới, nó thêm một danh sách không có thứ tự HTML (
  • )
  • Chèn
  • trong
    • hiển thị các thuộc tính của hero.
    • Rắc một số lớp CSS để tạo style (bạn sẽ sớm thêm các kiểu CSS).

     

Làm cho nó trông như thế này:

// heroes.component.html (heroes template)

My Heroes

• {{hero.id}} {{hero.name}}

Bây giờ thay đổi

• thành này:

   

  •  
   
  * NgFor là directive lặp lại của Angular. Nó lặp lại phần tử máy chủ cho từng phần tử trong danh sách. Trong ví dụ này
  •  
  • là thành phần máy chủ
  • heroes là danh sách từ lớp HeroesComponent.
  • hero giữ hero object hiện tại cho mỗi lần lặp thông qua danh sách.

  
  Đừng quên dấu hoa thị (*) trước ngFor. Đây là một phần quan trọng của cú pháp.

  Sau khi trình duyệt làm mới, danh sách các anh hùng xuất hiện.

  Style the heroes

  Danh sách hero phải hấp dẫn và sẽ phản hồi trực quan khi người dùng di chuột qua và chọn một hero từ danh sách.

  Trong hướng dẫn đầu tiên, bạn đặt các style cơ bản cho toàn bộ ứng dụng trong style.css. Bản định kiểu đó không bao gồm các style cho danh sách hero này.

  Bạn có thể thêm nhiều kiểu hơn vào style.css và tiếp tục phát triển biểu định style đó khi bạn thêm các thành phần.

  Thay vào đó, bạn có thể thích xác định các style riêng tư cho một thành phần cụ thể và giữ mọi thứ mà một thành phần cần có mã Code, HTML và CSS.

  Cách tiếp cận này giúp việc sử dụng lại thành phần ở một nơi khác dễ dàng hơn và mang lại diện mạo dự định của thành phần ngay cả khi các style toàn cục khác nhau.

  Bạn xác định các style riêng hoặc là nội tuyến trong mảng @ Element.styles hoặc dưới dạng (các) tệp biểu định style được xác định trong mảng @ Element.styleUrls.

  Khi CLI tạo HeroesComponent, nó đã tạo ra một bản định style hero.component.css trống cho HeroesComponent và chỉ vào nó trong @ Element.styleUrls như thế này.

  // src/app/heroes/heroes.component.ts (@Component)
  
  @Component({
    selector: 'app-heroes',
    templateUrl: './heroes.component.html',
    styleUrls: ['./heroes.component.css']
  })

   

  Mở tệp Heroes.component.css và dán theo kiểu CSS riêng cho HeroesComponent. Bạn sẽ tìm thấy chúng trong phần đánh giá mã cuối cùng ở cuối hướng dẫn này.

  
  Style và stylesheets được xác định trong siêu dữ liệu @Component nằm trong phạm vi thành phần cụ thể đó. Các kiểu hero.component.css chỉ áp dụng cho HeroesComponent và không ảnh hưởng đến HTML bên ngoài hoặc HTML trong bất kỳ thành phần nào khác.

  Chi tiết

  Khi người dùng nhấp vào một hero trong danh sách chính, thành phần sẽ hiển thị chi tiết của hero được chọn ở cuối trang.

  Trong phần này, bạn sẽ lắng nghe sự kiện click vào 1 hero và cập nhật chi tiết về hero.

  Thêm một ràng buộc sự kiện click

  Thêm một sự kiện click chuột ràng buộc vào
• như thế này:

heroes.component.html (template excerpt)

HeroesComponent.html:3 ERROR TypeError: Cannot read property 'name' of undefined

Bây giờ bấm vào một trong các mục danh sách. Các ứng dụng dường như đang hoạt động trở lại. Heroes xuất hiện trong một danh sách và chi tiết về hero được nhấp xuất hiện ở cuối trang.

src/app/heroes/heroes.component.html (*ngIf)

// heroes.component.html (toggle the 'selected' CSS class)

[class.selected]="hero === selectedHero"

// heroes.component.html (list item hero)