Helpex - Trao đổi & giúp đỡ Đăng nhập

Learning Angular 2: Tour of Heroes Tutorial, ngFor và ngIf

Dựa trên các bài tập viết mã bài 2 trong hướng dẫn Tour of Heroes, bài học tiếp theo liên quan đến việc hiển thị danh sách các đối tượng Anh hùng.

Cú pháp "* ngFor" rõ ràng là một sự khác biệt với cú pháp "ng-repeat" của Angular 1. Ít rõ ràng hơn là bây giờ cú pháp lặp bao gồm một khai báo biến tiêu chuẩn ("let"). Bỏ nó đi và bạn gặp lỗi ngắt trang. Trong Angular 1, bạn có thể thoát khỏi chỉ với "anh hùng trong các anh hùng".

Tôi đã xem qua một số tài liệu dành cho ngFor và thấy một số ý tưởng được kế thừa từ ng-repeat: khả năng lấy giá trị chỉ mục, khả năng áp dụng các kiểu nhất định dựa trên giá trị chỉ mục chẵn hoặc lẻ, v.v. Nhưng tôi đã không làm như vậy ' Tôi không thấy bất kỳ ví dụ cú pháp nào để sử dụng ngFor để lặp qua các thuộc tính chữ của đối tượng hoặc Bản đồ, điều gì đó tôi sẽ làm theo thời gian trong Angular 1 nhưng luôn quên cú pháp lặp lại đối với.

Learning Angular 2: Tour of Heroes Tutorial, ngFor và ngIf


Tò mò đến mức bị lừa, tôi đã thực hiện một số tìm kiếm và biết rằng hiện tại ngFor không hỗ trợ lặp qua các cấu trúc cặp khóa / giá trị:

https://github.com/angular/angular/issues/2246

... nhưng nó có vẻ giống như khái niệm cung cấp một đường ống trong cơ sở mã Angular 2 để cho phép điều đó vẫn còn trên bảng (một đường ống là một hàm để chuyển đổi các giá trị dữ liệu). Và có một số bài đăng trên blog về việc viết đường ống của riêng bạn để đạt được chức năng đó . Một cái gì đó để xem xét thêm xuống dòng.

Tôi thích ý tưởng có thuộc tính "styles" trên một thành phần. Tôi có thể thấy việc giữ các kiểu dự án bất khả tri trong thành phần sẽ giúp dễ sử dụng hơn trong nhiều dự án.

Trong bài đăng trước của tôi, tôi đã nhận xét về cách các phép gán thuộc tính ban đầu trong AppComponent (như "title") không được định kiểu. Thuộc tính "selectHero" được giới thiệu trong bài học này không có giá trị ban đầu mà được gõ dưới dạng một biến kiểu Hero.

Lệnh "* ngIf" mới có vẻ đủ đơn giản và giống như "ng-if" của Angular 1, nó có thể xử lý một biểu thức boolean ghép:

<div *ngIf="selectedHero && 1 == 1">

Nhưng, việc nhìn thấy nó khiến tôi tò mò nếu các chỉ thị cốt lõi của Angular 1 "ng-show" và "ng-hide" cũng tồn tại trong Angular 2 (trong các dự án công việc của tôi, chúng tôi có xu hướng sử dụng chúng thay vì "ng-if" ở nhiều nơi) . Có vẻ như câu trả lời cho điều đó là không. Các nhà phát triển hướng dẫn trang trên chỉ cấu trúc như ngIf, ngFor, và ngSwitch làm cho các điểm mà bạn thường (mặc dù không phải luôn luôn) nên sử dụng ngIf để tiêu diệt các phần tử DOM không sử dụng, do đó loại bỏ một trong các thính giả ràng buộc mà đi với nó.

Tôi nhận thấy trên cùng trang hướng dẫn đó rằng chỉ thị ngSwitch KHÔNG được đặt trước dấu hoa thị (*) như ngFor và ngIf..và thoạt nhìn thì có vẻ như con ngSwitchKhi các chỉ thị cũng không có, cho đến khi tôi ngồi lại và nhận ra rằng trong đó mã ví dụ phần tử <template> mà dấu hoa thị ngụ ý cho các chỉ thị này đã được "đánh vần" trong ví dụ.

Tuy nhiên, điều đó KHÔNG có nghĩa là tôi có thể làm điều này:

<template ngIf="selectedHero">...</template>

... mà không có "*", nó bị lỗi và với "*", trình duyệt không biết cách hiển thị thẻ <template> nên nó không được hiển thị .... điều này khiến tôi tự hỏi liệu <template > ngSwitchKhi ví dụ hoạt động .... (Chuckle), nó có, nhưng tôi nhận được thông báo trên bảng điều khiển nói rằng "ngSwitchWhen không được dùng nữa; hãy sử dụng ngSwitchCase thay thế". Tôi thấy có một yêu cầu kéo để cập nhật tài liệu liên quan đến thay đổi này ( https://github.com/angular/angular.io/pull/1710 ).

Bước viết mã cuối cùng của bài học:

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

... về mặt kỹ thuật là ràng buộc lớp chứ không phải ràng buộc thuộc tính như trong bài đã nêu. Và nó bị giới hạn trong việc gán một lớp dựa trên đánh giá của biểu thức, trong khi chỉ thị ngClass hỗ trợ thiết lập nhiều lớp.

10 hữu ích 0 bình luận 6.9k xem chia sẻ

Có thể bạn quan tâm

loading