Cách nâng cấp bộ lọc phân loại góc

AngularJS, Một trong những tính năng hữu ích nhất mà AngularJS cung cấp ban đầu là khả năng lọc và sắp xếp dữ liệu trên trang chỉ sử dụng các biến mẫu và bộ lọc. Liên kết dữ liệu hai chiều đã chiến thắng nhiều lần chuyển đổi sang AngularJS.

---

Tuy nhiên, ngày nay, nhiều nhà phát triển front-end thích ràng buộc dữ liệu một chiều hơn và các filter orderBy và filter đã ngừng hoạt động với sự ra đời của Angular. (Lưu ý: trong suốt bài viết này, tôi sẽ sử dụng “AngularJS” để chỉ 1.x và chỉ “Angular” để chỉ 2+.)

Nhưng ta phải làm thế nào để đạt được hiệu quả tương tự? Câu trả lời nằm trong các thành phần của ta , vì vậy hãy xem xét một dự án ngUpgrade và tìm hiểu cách thực hiện điều này!

Bước 1 - Mã kéo từ Git

Ta sẽ từng bước cập nhật mẫu của một thành phần mới được viết lại. Sau đó, ta sẽ thêm sắp xếp và lọc để khôi phục tất cả các chức năng mà nó có trong AngularJS. Đây là một kỹ năng quan trọng cần phát triển cho quá trình ngUpgrade.

Để bắt đầu, hãy dành một chút thời gian để sao chép dự án mẫu mà ta sẽ sử dụng (đừng quên chạy npm install trong cả folder public và server ). Kiểm tra commit này để biết điểm khởi đầu của ta :

git checkout 9daf9ab1e21dc5b20d15330e202f158b4c065bc3 

Dự án mẫu này là một dự án kết hợp ngUpgrade sử dụng cả AngularJS 1.6 và Angular 4. Nó có một API Express hoạt động và một bản dựng Webpack cho cả phát triển và production . Hãy tự do khám phá, phân nhánh nó và sử dụng các mẫu trong các dự án của bạn . Nếu bạn muốn xem version của dự án này sử dụng Angular 5, hãy xem repo này . Đối với mục đích của hướng dẫn này, sự khác biệt giữa hai version sẽ không quan trọng (tôi sẽ chỉ ra bất cứ điều gì nhỏ).

Bước 2 - Thay thế cú pháp AngularJS

Ở giai đoạn này trong ứng dụng của ta , thành phần đơn đặt hàng của ta được viết lại bằng Angular, với tất cả các phụ thuộc của nó được đưa vào và giải quyết. Tuy nhiên, nếu ta cố gắng chạy ứng dụng của bạn , ta sẽ thấy lỗi trong console cho biết sự cố với mẫu của ta . Đó là những gì ta cần sửa chữa đầu tiên. Ta sẽ thay thế cú pháp AngularJS trong mẫu đơn hàng ( orders/orders.html ) để ta có thể tải tuyến đường và đơn hàng được hiển thị trên trang. Tiếp theo, ta sẽ sửa lỗi lọc và sắp xếp.

Điều đầu tiên ta cần làm là loại bỏ tất cả các trường hợp của $ctrl trong mẫu này. Chúng không còn cần thiết trong Angular nữa. Ta chỉ có thể thực hiện tìm và thay thế để tìm $ctrl. (lưu ý dấu chấm), và thay thế nó bằng không.

Bây giờ hãy thay data-ng-click vào nút của ta ở dòng 13. Trong Angular, thay vì ng-click , ta chỉ sử dụng sự kiện click , với dấu ngoặc đơn để cho biết đó là một sự kiện. Dấu ngoặc cho biết một đầu vào và dấu ngoặc cho biết một kết quả hoặc một sự kiện.

<button type="button" (click)="goToCreateOrder()" class="btn btn-info">Create Order</button> 

Ở đây ta chỉ nói rằng trong sự kiện nhấp chuột, hãy tắt chức năng goToCreateOrder trên thành phần đơn đặt hàng của ta .

Trước khi tiếp tục, hãy dành một phút để chứng minh rằng thành phần của ta đang thực sự tải. Comment toàn bộ div tải đơn đặt hàng của ta (từ dòng 17 trở đi). Để chạy ứng dụng, hãy mở một terminal và chạy các lệnh sau:

cd server npm start 

Điều đó sẽ khởi động server Express. Để chạy server nhà phát triển Webpack, hãy mở một terminal khác và chạy:

cd public npm run dev 

(Bạn có thể giữ cho các quy trình này chạy trong phần còn lại của hướng dẫn này.)

Bạn sẽ thấy rằng ứng dụng của ta đang reload . Nếu bạn đi đến tuyến đơn đặt hàng, bạn sẽ thấy rằng thành phần đơn đặt hàng đang hiển thị chính xác.

Ta cũng có thể nhấp vào nút Tạo Đơn hàng và nút này sẽ đưa ta đến đúng lộ trình và biểu mẫu Tạo Đơn hàng.

Được rồi, hãy quay lại HTML. Bỏ comment div đó (ứng dụng của ta sẽ bị hỏng ).

Hãy thay thế tất cả phần còn lại của các trường hợp data-ng-click bằng trình xử lý sự kiện (click) . Bạn có thể sử dụng Tìm & Thay thế hoặc chỉ sử dụng phím tắt của editor để chọn tất cả các lần xuất hiện (trong VS Code cho Windows, đây là Ctrl + Shift + L).

Tiếp theo, thay thế tất cả các lần xuất hiện của data-ng-show bằng *ngIf . Thực tế không có tương đương trực tiếp với ng-show trong Angular, nhưng điều đó không sao. Tốt hơn là sử dụng *ngIf , bởi vì theo cách đó bạn thực sự thêm và xóa các phần tử khỏi DOM thay vì chỉ ẩn và hiển thị chúng. Vì vậy, tất cả những gì ta cần làm là tìm data-ng-show s và thay thế bằng *ngIf .

Cuối cùng, ta cần làm hai việc để cố định thân bàn của bạn . Đầu tiên, thay data-ng-repeat bằng *ngFor="let order of orders" . Lưu ý ta cũng đang xóa các filter orderBy và filter trong dòng đó để toàn bộ tr trông giống như sau:

<tr *ngFor="let order of orders"> 

Thứ hai, ta có thể xóa tiền tố data-ng trước liên kết href đến tuyến chi tiết đơn hàng. AngularJS vẫn đang xử lý định tuyến ở đây, nhưng ta không cần sử dụng tiền tố đó nữa vì đây bây giờ là một mẫu Angular.

Nếu ta xem lại ứng dụng, bạn có thể thấy rằng các đơn hàng đang tải chính xác trên màn hình:

Tất nhiên, có một vài điều sai với nó. Các liên kết phân loại không còn hoạt động nữa và hiện tại tiền tệ của ta đang bị rối loạn vì ống tiền tệ trong Angular hơi khác so với đối tác AngularJS của nó. Ta sẽ đạt được điều đó. Hiện tại, đây là một dấu hiệu tuyệt vời, bởi vì nó nghĩa là dữ liệu của ta đang được chuyển đến thành phần và tải trên trang. Vì vậy, ta đã có những điều cơ bản về mẫu này được chuyển đổi thành Angular. Bây giờ ta đã sẵn sàng giải quyết vấn đề sắp xếp và lọc của bạn !

Bước 3 - Thêm sắp xếp

Ta đã có các đơn đặt hàng đang tải trên màn hình, nhưng ta chưa có cách sắp xếp hoặc đặt hàng. Trong AngularJS, việc sử dụng bộ lọc orderBy để sắp xếp dữ liệu trên trang là rất phổ biến. Angular không còn có bộ lọc orderBy . Điều này là do bây giờ ta rất khuyến khích chuyển loại logic nghiệp vụ đó vào thành phần thay vì có nó trên mẫu. Vì vậy, đó là những gì ta sẽ làm ở đây. (Lưu ý: ta sẽ sử dụng các hàm và sự kiện cũ ở đây, không phải phương pháp tiếp cận biểu mẫu phản ứng. Điều này là do ta chỉ đang cố gắng thực hiện các bước nhỏ để hiểu nội dung này. Khi bạn đã nắm được thông tin cơ bản, hãy cảm nhận miễn phí để đưa nó đi xa hơn với các vật có thể quan sát được!)

Sắp xếp trong thành phần

Ta đã xóa bộ lọc orderBy khỏi ng-repeat khi ta thay đổi nó thành *ngFor . Bây giờ ta sẽ tạo một hàm sắp xếp trên thành phần đơn hàng. Ta có thể sử dụng các sự kiện nhấp chuột trên tiêu đề bảng của bạn để gọi hàm đó và chuyển thuộc tính mà ta muốn sắp xếp theo. Ta cũng sẽ có chức năng đó chuyển đổi qua lại giữa tăng dần và giảm dần.

Hãy mở thành phần đơn hàng ( ./orders/orders.component.ts ) và thêm hai thuộc tính công khai vào lớp. Chúng sẽ trùng với hai thuộc tính mà mẫu của ta đã tham chiếu. Cái đầu tiên sẽ là sortType của loại string . Cái thứ hai sẽ là sortReverse của kiểu boolean và ta sẽ đặt giá trị mặc định thành false. sortReverse tính sortReverse chỉ theo dõi xem có lật thứ tự hay không - đừng nghĩ về nó như một từ đồng nghĩa với tăng dần hoặc giảm dần.

Vì vậy, bây giờ bạn sẽ có điều này sau khi khai báo tiêu đề trong lớp:

sortType: string; sortReverse: boolean = false; 

Tiếp theo, ta sẽ thêm hàm mà ta sẽ sử dụng với hàm nguyên mẫu Array.sort trong JavaScript. Thêm cái này sau hàm goToCreateOrder (nhưng vẫn nằm trong lớp):

dynamicSort(property) {     return function (a, b) {         let result = (a[property] < b[property]) ? -1 : (a[property] > b[property]) ? 1 : 0;         return result;     }  } 

Hàm sắp xếp động này sẽ so sánh giá trị thuộc tính của các đối tượng trong một mảng. Thoạt nhìn, hàm bậc ba lồng nhau có thể hơi khó hiểu, nhưng về cơ bản nó chỉ nói rằng nếu giá trị thuộc tính A của ta nhỏ hơn B, hãy trả về -1. Ngược lại, nếu nó lớn hơn, trả về 1. Nếu hai bằng nhau, trả về 0.

Bây giờ, đây không phải là sự so sánh siêu phức tạp hay sâu sắc. Có nhiều cách hàm trợ giúp phức tạp hơn mà bạn có thể viết để sắp xếp cho mình và hãy thoải mái thử nghiệm cách bạn có thể phá vỡ hàm này. Tuy nhiên, nó sẽ làm cho các mục đích của ta và bạn chỉ có thể swap logic này với bất kỳ logic sắp xếp tùy chỉnh nào bạn thích.

Vì vậy, đó là chức năng trợ giúp của ta . Hàm sắp xếp trên nguyên mẫu Mảng có thể được thông qua một hàm mà sau đó nó có thể sử dụng để so sánh các mục trong một mảng. Hãy tạo một hàm có tên sortOrders trên lớp của ta để tận dụng lợi thế đó với hàm dynamicSort mới:

sortOrders(property) { } 

Điều đầu tiên ta cần làm là đặt thuộc tính sortType trên lớp của ta bằng thuộc tính được truyền vào. Sau đó, ta muốn chuyển thuộc tính sortReverse . Ta sẽ có cái này:

sortOrders(property) {     this.sortType = property;      this.sortReverse = !this.sortReverse; } 

Bây giờ ta có thể gọi hàm sort trên this.orders , nhưng chuyển vào hàm sắp xếp động với thuộc tính của ta :

sortOrders(property) {     this.sortType = property;     this.sortReverse = !this.sortReverse;     this.orders.sort(this.dynamicSort(property)); } 

Và có một điều cuối cùng ta cần làm. Ta cần sửa đổi hàm dynamicSort của dynamicSort một chút để có thể đảo ngược thứ tự của mảng tăng dần hoặc giảm dần. Để làm điều này, ta sẽ mount quả của dynamicSort với thuộc tính sortReverse trên lớp.

Điều đầu tiên ta sẽ làm là khai báo một biến:

let sortOrder = -1;

Sau đó, ta có thể kiểm tra xem sortReverse tính sortReverse trên lớp của ta là đúng hay sai. Nếu đúng, ta sẽ đặt biến thứ tự sắp xếp của ta bằng 1:

if (this.sortReverse) {     sortOrder = 1;  } 

Ta đang liên kết các chức năng của ta với nhau như thế này bởi vì ta đang thực hiện chuyển đổi trong chức năng sắp xếp của bạn nhằm mục đích minh họa. Nói một cách kỹ hơn, một cách tiếp cận khác sẽ là có một biến được gọi là sortDescending thay vì sortReverse điều khiển thông qua một hàm riêng biệt. Nếu bạn đi theo con đường này, bạn sẽ làm ngược lại - sortOrder sẽ là 1 trừ khi sortDescending là đúng.

Ta cũng có thể kết hợp hai điều cuối cùng này thành một biểu thức bậc ba, nhưng để rõ ràng hơn, tôi sẽ để nó dài dòng hơn một chút. Và sau đó để chỉ làm cho kết quả của ta ngược lại với những gì bình thường, tôi chỉ có thể nhân result với sortOrder của ta . Vì vậy, hàm dynamicSort của ta bây giờ trông giống như sau:

 dynamicSort(property) {      let sortOrder = -1;      if (this.sortReverse) {         sortOrder = 1;     }      return function(a, b) {         let result = a[property] < b[property] ? -1 : a[property] > b[property] ? 1 : 0;          return result * sortOrder;     };   } 

, đây là phần triển khai trình diễn sắp xếp, để bạn hiểu các khái niệm chính về việc sử dụng chức năng sắp xếp tùy chỉnh trên thành phần của bạn .

Hãy xem nếu cách sắp xếp hoạt động

Lúc này, ta đã thêm một dynamicSort trợ giúp dynamicSort và một hàm sortOrders vào lớp của ta để ta có thể sắp xếp trên thành phần của bạn thay vì trên mẫu của ta .

Để xem các hàm này có hoạt động hay không, hãy thêm sắp xếp mặc định vào hàm ngOnInit của ta .

Bên trong đăng ký forkJoin của ta , sau forEach nơi ta thêm thuộc tính tên khách hàng, hãy gọi this.sortOrders và chuyển thuộc tính tổng số mục:

this.sortOrders('totalItems');

Khi màn hình làm mới, bạn sẽ thấy rằng các đơn đặt hàng đang được sắp xếp theo tổng số mục.

Bây giờ ta chỉ cần thực hiện sắp xếp này trên mẫu của ta bằng cách gọi hàm sortOrders trong từ các liên kết tiêu đề bảng.

Thêm sắp xếp vào mẫu

Ta đã có chức năng sortOrders của ta hoạt động chính xác trên thành phần đơn đặt hàng của ta , nghĩa là bây giờ ta đã sẵn sàng thêm nó vào mẫu của bạn để các tiêu đề bảng có thể nhấp lại được.

Trước khi làm điều đó, hãy thay đổi cách sắp xếp mặc định trong hàm ngOnInit thành ID:

this.sortOrders('id');

Điều đó bình thường hơn một chút so với việc sử dụng tổng số mục.

Bây giờ ta có thể làm việc trên mẫu của bạn . Điều đầu tiên ta muốn làm là gọi hàm sortOrders trong tất cả các sự kiện nhấp chuột của ta . Bạn có thể chọn các trường hợp của sortType = và thay thế chúng bằng sortOrders( . Sau đó, bạn có thể thay thế các trường hợp của ; sortReverse = !sortReverse bằng ) .

Ta cũng cần sửa hai trong số các tên thuộc tính mà ta đang chuyển vào đây, cũng như trong các trường hợp *ngIf . Thay thế 3 trường hợp orderId bằng id và 3 trường hợp tên customername bằng customerName .

Điều cuối cùng tôi cần làm là quấn từng thẻ href trong tiêu đề trong dấu ngoặc vuông để Angular tiếp quản và các liên kết này sẽ không thực sự đi đâu cả. Sự kiện nhấp chuột sẽ là thứ được kích hoạt. Vì vậy, các tiêu đề nên tuân theo mẫu này:

<th>     <a [href]="" (click)="sortOrders('id')">         Order Id         <span *ngIf="sortType == 'id' && !sortReverse" class="fa fa-caret-down"></span>         <span *ngIf="sortType == 'id' && sortReverse" class="fa fa-caret-up"></span>          </a> </th> 

Truy cập trình duyệt và kiểm tra tất cả các liên kết tiêu đề bảng của bạn. Bạn sẽ thấy rằng mỗi thuộc tính của ta hiện được sắp xếp, theo cả thứ tự tăng dần và giảm dần. Tuyệt vời!

Điều này thật tuyệt, nhưng ta đã đánh mất một điều - con trỏ của ta là một bộ chọn, không phải là một con trỏ. Hãy khắc phục điều đó bằng một số CSS.

Sửa con trỏ

Ta đã sắp xếp hoạt động chính xác trên trang đơn đặt hàng của bạn , nhưng con trỏ của ta hiện là một bộ chọn thay vì một con trỏ và điều đó thật khó chịu.

Có một số cách khác nhau mà ta có thể sử dụng CSS để khắc phục điều này:

• Ta có thể tạo một lớp trong file SCSS ứng dụng chính của ta .
• Ta có thể viết CSS nội dòng, mặc dù điều đó hầu như không bao giờ tốt.
• Ta có thể tận dụng CSS theo phạm vi của Angular bằng cách sử dụng tùy chọn kiểu trong trình trang trí thành phần

Ta sẽ đi với tùy chọn cuối cùng, bởi vì tất cả những gì ta cần làm là thêm một luật vào các kiểu của ta cho thành phần cụ thể này.

Mở lại lớp thành phần đơn đặt hàng. Trong trình trang trí thành phần, ta có thể thêm một thuộc tính mới gọi là styles . Kiểu là một mảng các chuỗi, nhưng các chuỗi là các luật CSS. Để sửa con trỏ, tất cả những gì ta cần làm là viết ra một luật nói rằng trong một hàng của bảng, nếu ta có một liên kết, thì hãy thay đổi thuộc tính con trỏ thành con trỏ. Trình trang trí của ta bây giờ sẽ trông như thế này:

@Component({     selector: 'orders',     template: template,     styles: ['tr a { cursor: pointer; }'] }) 

Bây giờ, khi ta di chuột qua các tiêu đề hàng, bạn sẽ thấy ta có con trỏ chuột. Điều thú vị về cách tiếp cận này là luật CSS này sẽ không ảnh hưởng đến bất kỳ thành phần nào khác. Nó sẽ chỉ áp dụng cho thành phần đơn đặt hàng của ta !

Bây giờ, hãy xem liệu ta có thể làm gì đó với bộ lọc của bạn không. “Bộ lọc bộ lọc” đó đã bị xóa khỏi Angular, vì vậy ta sẽ phải sáng tạo và tìm ra cách để triển khai nó trên thành phần của bạn .

Bước 4 - Thêm bộ lọc

Ta đã sẵn sàng thay thế hộp bộ lọc đã từng sử dụng bộ lọc AngularJS để tìm kiếm thông qua bộ sưu tập đơn đặt hàng dựa trên một chuỗi mà ta đang tìm kiếm. Bộ lọc AngularJS sống trên mẫu của ta và không yêu cầu bất kỳ mã nào trong bộ điều khiển hoặc thành phần của ta . Ngày nay, loại logic đó trong mẫu không được khuyến khích. Ta ưu tiên thực hiện loại sắp xếp và lọc đó trên lớp thành phần của ta .

Thêm chức năng lọc

Quay lại thành phần của ta , ta sẽ tạo một mảng đơn đặt hàng mới được gọi là Các đơn đặt hàng được filteredOrders . Sau đó, ta sẽ chuyển mảng orders vào một hàm bộ lọc để cài đặt mảng orders filteredOrders . Cuối cùng, ta sẽ sử dụng các Thứ tự filteredOrders trên mẫu của ta trong *ngFor của ta thay vì mảng ban đầu của ta . Bằng cách đó, ta sẽ không bao giờ sửa đổi dữ liệu quay lại từ server , ta chỉ đang sử dụng một tập hợp con của nó.

Điều đầu tiên ta sẽ làm là khai báo thuộc tính mới trên lớp của ta :

filteredOrders: Order[]; 

Sau đó, trong forkJoin của ta đặt mảng đơn hàng ban đầu của ta , ta có thể đặt trạng thái ban đầu của các đơn hàng filteredOrders thành mảng đơn hàng của ta :

this.filteredOrders = this.orders;

Bây giờ ta đã sẵn sàng để thêm chức năng thực sự sẽ thực hiện việc lọc cho ta . Dán hàm này vào ngay sau các hàm sắp xếp của ta ở cuối thành phần của ta :

filterOrders(search: string) {     this.filteredOrders = this.orders.filter(o =>       Object.keys(o).some(k => {         if (typeof o[k] === 'string')           return o[k].toLowerCase().includes(search.toLowerCase());       })     );   } 

Hãy nói về những gì đang xảy ra trong chức năng này. Đầu tiên, ta cung cấp cho hàm một thuộc tính chuỗi search . Sau đó, ta lặp lại các đơn đặt hàng của bạn và sau đó tìm tất cả các khóa của các đối tượng. Đối với tất cả các khóa, ta sẽ xem liệu có some giá trị của các thuộc tính đó trùng với cụm từ tìm kiếm của ta hay không. Đoạn mã JavaScript này thoạt nhìn có thể hơi khó hiểu, nhưng về cơ bản đó là những gì đang diễn ra.

Lưu ý , trong câu lệnh if của ta , ta đang kiểm tra rõ ràng các chuỗi. Trong ví dụ của ta ngay bây giờ, ta sẽ giới hạn truy vấn của ta thành chuỗi. Ta sẽ không cố gắng xử lý các thuộc tính lồng nhau, thuộc tính số hoặc bất kỳ thứ gì tương tự. Cụm từ tìm kiếm của ta sẽ trùng với thuộc tính tên khách hàng của ta và nếu ta chọn hiển thị địa chỉ của bạn hoặc bất kỳ thuộc tính chuỗi nào khác, nó cũng sẽ tìm kiếm qua các thuộc tính đó.

Tất nhiên, ta cũng có thể sửa đổi chức năng này để kiểm tra các con số hoặc xem qua một lớp đối tượng lồng nhau khác và điều đó hoàn toàn tùy thuộc vào bạn. Cũng giống như cách sắp xếp của ta , ta sẽ bắt đầu với việc triển khai trình diễn và cho phép bạn sử dụng trí tưởng tượng của bạn để làm cho nó phức tạp hơn.

Nói về hàm sortOrders , trước khi tiếp tục, ta cần thực hiện một điều cuối cùng trên thành phần. Ta chỉ cần sửa đổi sortOrders sử dụng filteredOrders bây giờ và không ban đầu của ta orders , vì ta muốn các bộ lọc để ưu tiên hơn việc phân loại. Chỉ cần thay đổi nó thành thế này:

sortOrders(property) {     this.sortType = property;     this.sortReverse = !this.sortReverse;     this.filteredOrders.sort(this.dynamicSort(property)); } 

Bây giờ ta đã sẵn sàng triển khai bộ lọc này trên mẫu.

Thêm bộ lọc vào mẫu

Hãy quay lại mẫu của ta và sửa nó để sử dụng bộ lọc của ta .

Điều đầu tiên ta cần làm là thay thế data-ng-model . Thay vì điều đó, ta sẽ sử dụng sự kiện keyup , vì vậy ta sẽ viết, “keyup” và đặt nó trong dấu ngoặc đơn ( (keyup) ). Đây là một sự kiện được tích hợp sẵn trong Angular cho phép ta chạy một chức năng khi bắt đầu nhập liệu. Vì ta đặt tên cho hàm là filterOrders , từng là tên của thuộc tính mà ta đang chuyển vào bộ lọc AngularJS, ta chỉ cần thêm dấu ngoặc đơn bên cạnh nó. Đầu vào của ta trông giống như sau:

<input type="text" class="form-control" placeholder="Filter Orders (keyup)="filterOrders()"> 

Nhưng ta chuyển những gì vào chức năng lệnh bộ lọc? Theo mặc định, các sự kiện truyền một thứ gọi là $event . Điều này chứa một cái gì đó được gọi là target , sau đó chứa giá trị của đầu vào. Có một vấn đề với việc sử dụng $event . Rất khó để theo dõi những kiểu target.value vì target.value có thể là bất cứ thứ gì. Điều này làm cho việc gỡ lỗi hoặc biết loại giá trị được mong đợi là khó khăn. Thay vào đó, Angular có một việc thực sự tiện lợi mà ta có thể làm, đó là gán một biến mẫu cho đầu vào này.

May mắn là Angular cung cấp một phương pháp để ta thực hiện điều này. Sau thẻ đầu vào của ta , ta có thể thêm dấu thăng (#) và sau đó là tên của mô hình mong muốn của ta . Hãy gọi nó là #ordersFilter . Thực sự không quan trọng bạn đặt thẻ này ở đâu hoặc bạn gọi nó là gì, nhưng tôi thích đặt nó sau đầu vào để bạn nắm bắt được mô hình nào được liên kết với đầu vào nào nếu tôi chỉ lướt qua trang.

Bây giờ tôi có thể chuyển biến đó vào hàm filterOrders của ta trong sự kiện keyup . Ta không cần ký hiệu băm trước nó, nhưng ta cần thêm .value . Điều này sẽ vượt qua giá trị thực của mô hình chứ không phải toàn bộ mô hình. Đầu vào đã hoàn thành của ta trông như thế này:

<input #ordersFilter type="text" class="form-control"      placeholder="Filter Orders" (keyup)="filterOrders(ordersFilter.value)"> 

Cuối cùng, ta cần phải sửa đổi của ta *ngFor sử dụng filteredOrders mảng thay vì thường xuyên orders mảng:

<tr *ngFor="let order of filteredOrders"> 

Kiểm tra sản phẩm

Bạn có thể thấy mẫu của ta hiện đã gọn gàng hơn bao nhiêu khi bộ lọc và sắp xếp của ta trong thành phần.

Bây giờ ta hãy kiểm tra điều này trong trình duyệt. Nếu bạn nhập một số văn bản vào hộp, chẳng hạn như “sally”, bạn sẽ thấy rằng đơn đặt hàng của ta đang thay đổi và việc sắp xếp hoạt động trên đó:

Tuyệt vời, ta đã thay thế một tính năng AngularJS khác!

Bây giờ ta chỉ có một điều cuối cùng ta cần làm trên thành phần này - sửa đường ống tiền tệ.

Bước 5 - Sửa ống tiền tệ

Bước cuối cùng của ta là cập nhật bộ lọc tiền tệ cũ, hiện được gọi là ống tiền tệ trong Angular. Ta chỉ cần thêm một vài tham số vào đường ống trong mẫu mà ta không phải chỉ định trong AngularJS. Phần này sẽ khác nếu bạn đang sử dụng Angular 4 hoặc Angular 5:.

Trong Angular 4, làm điều này:
<td>{{order.totalSale | currency:'USD':true}}</td>

Trong Angular 5+, hãy làm điều này:
<td>{{order.totalSale | currency:'USD':'symbol'}}</td>

Tùy chọn đầu tiên là mã tiền tệ (có rất nhiều, bạn không bị giới hạn ở đô la Mỹ!). Cái thứ hai là màn hình hiển thị biểu tượng. Trong Angular 4, đây là một boolean cho biết nên sử dụng ký hiệu tiền tệ hay mã. Trong Angular 5+, các tùy chọn là symbol , code hoặc symbol-narrow dưới dạng chuỗi.

Đến đây bạn sẽ thấy biểu tượng mong đợi:

Và ta đã hoàn thành! Để xem mã đã hoàn thành, hãy kiểm tra commit này .

Kết luận

Bạn đã làm một công việc tuyệt vời gắn bó với điều này đến cuối cùng! Đây là những gì ta đã đạt được trong hướng dẫn này:

1. Thay thế cú pháp mẫu AngularJS bằng cú pháp Angular
2. Di chuyển sắp xếp thành phần
3. Sử dụng các kiểu CSS theo phạm vi
4. Di chuyển bộ lọc sang thành phần
5. Thay thế bộ lọc tiền tệ AngularJS bằng ống tiền tệ Angular

Bạn nên đi đâu từ đây? Có rất nhiều điều bạn có thể làm:

• Làm cho việc sắp xếp phức tạp hơn (ví dụ: nên đặt lại thứ tự hay giữ nguyên khi user nhấp vào một tiêu đề mới?)
• Làm cho bộ lọc phức tạp hơn (tìm kiếm số hoặc thuộc tính lồng nhau)
• Thay đổi cách tiếp cận phản ứng. Bạn có thể lắng nghe những thay đổi giá trị có thể quan sát được thay vì hàm keyup và thực hiện phân loại và lọc trong đó. Sử dụng các vật có thể quan sát cũng sẽ cho phép bạn làm những việc thực sự thú vị như xóa dữ liệu đầu vào!

---

---

Các tin liên quan