Hướng dẫn này hướng dẫn bạn cách hiển thị đối tượng JSON bằng chỉ thị ngFor trong Angular 9. Trong ví dụ hướng dẫn này, hãy xem cách sử dụng phản hồi JSON từ API REST và hiển thị dữ liệu trong mẫu của thành phần
Hiển thị đối tượng JSON bằng chỉ thị ngFor – Angular 9
Lệnh *ngFor cho phép bạn lặp qua dữ liệu tương tự như vòng lặp for-each trong Java. Ví dụ: khi phản hồi API REST nhận được ở định dạng JSON, ngFor có thể được sử dụng trong mẫu của thành phần để hiển thị dữ liệu
Hãy sử dụng lệnh này để hiển thị danh sách động từ phản hồi JSON. Ví dụ: mảng JSON trông giống như dữ liệu ví dụ sau
jsonArray = [ { uid: '10', age: 22, username: 'John Paul', }, { uid: '11', age: 35, username: 'Peter Jackson', }, { uid: '12', age: 30, username: 'Will Smith', }, { uid: '13', age: 25, username: 'Peter Paul', }, { uid: '14', age: 34, username: 'Johnson Peter', }, { uid: '15', age: 30, username: 'Eric Smidth', }, ]
Chẳng hạn, bạn muốn xuất dữ liệu trong chế độ xem HTML giống như bên dưới
- John Paul, 10, 22
- Peter Jackson, 11, 35
- Will Smith, 12, 30
- Peter Paul, 13, 25
- Johnson Peter, 14, 34
- Eric Smidth, 15, 30
Hãy xem cách hiển thị đối tượng JSON bằng chỉ thị ngFor i. e. , kết xuất một mảng bằng ngFor trong Angular 9. Tất cả những gì bạn cần làm là chỉ cần nói cho lệnh ngFor biết nó cần sử dụng mảng nào
Đối với ví dụ của chúng tôi, hãy mã hóa cứng phản hồi mảng JSON mẫu này trong tệp lớp thành phần [tệp bản thảo,. ts]. Do đó, tệp lớp thành phần của bạn sẽ giống như bên dưới
thành phần của tôi. thành phần. ts
import { Component } from '@angular/core'; @Component[{ selector:'app-mycomp', templateUrl:'./mycomponent.component.html', }] export class MycomponentComponent { jsonArray = [ { uid: '10', age: 22, username: 'John Paul', }, { uid: '11', age: 35, username: 'Peter Jackson', }, { uid: '12', age: 30, username: 'Will Smith', }, { uid: '13', age: 25, username: 'Peter Paul', }, { uid: '14', age: 34, username: 'Johnson Peter', }, { uid: '15', age: 30, username: 'Eric Smidth', }, ] }
Next, to display the JSON object, we need to use the ngFor directive in our component’s template and tell which array to use. In our example, let’s create list element for each element in the JSON array. Therefore, you need to place the ngFor directive inside the
Bạn có để ý câu lệnh “let element of jsonArray” trong cú pháp ngFor không? . Sử dụng câu lệnh let đó, chúng ta định nghĩa một biến gọi là “phần tử“, chứa tham chiếu của phần tử mảng hiện tại
Sau đó, chúng tôi sử dụng biến "phần tử" để thêm tên người dùng, uid và tuổi vào từng phần tử danh sách
thành phần của tôi. thành phần. html
This is My First Component
- {{element.username}}, {{element.uid}}, {{element.age}}
Đầu ra được hiển thị, sẽ trông như thế này
- John Paul, 10, 22
- Peter Jackson, 11, 35
- Will Smith, 12, 30
- Peter Paul, 13, 25
- Johnson Peter, 14, 34
- Eric Smidth, 15, 30
Và đừng quên sử dụng bộ chọn thành phần ‘app-mycomp‘ trong thành phần chính của bạn [ứng dụng. thành phần. html]
Hôm nay chúng ta sẽ xem cách đọc các thuộc tính của đối tượng Json một cách linh hoạt và hiển thị nó bằng cách sử dụng một thành phần chung trong Angular
Tôi gặp phải tình huống buộc phải hiển thị nội dung từ các nguồn khác nhau ở định dạng bảng trên cùng một màn hình. Các nguồn này có cấu trúc dữ liệu khác nhau.
Để đáp ứng yêu cầu này về mặt kỹ thuật, tôi đã quyết định tạo một thành phần chung trong góc để truy cập dữ liệu, lấy các tiêu đề và hiển thị nó trên giao diện người dùng. Bằng cách này, tôi không phải tạo các thành phần khác nhau cho từng cấu trúc dữ liệu và ngoài ra, tôi có thể sử dụng cùng một CSS trên bảng.
Tôi đang sử dụng một cổng thông tin có tên là Stackblitz, đây là một cổng thông tin tuyệt vời để thực hành góc cạnh/phản ứng/javasript. Nó thiết lập mọi thứ ngay lập tức và về cơ bản bạn đã sẵn sàng viết dòng mã đầu tiên mà không phải đau đầu thực hiện các cài đặt NPM để nghiên cứu. Đây là những gì họ đang cung cấp tại thời điểm này
VÂNG. Hãy xem mã
Hãy tạo một thành phần chung table-display.component
mà chúng ta sẽ sử dụng để hiển thị dữ liệu ở định dạng bảng
import { Component, Input, OnInit } from "@angular/core";
@Component[{
selector: "table-display",
templateUrl: "table-display.component.html"
}]
export class TableDisplayComponent implements OnInit {
headers: any;
constructor[] {}
ngOnInit[] {
this.headers = Object.keys[this.items[0]];
}
@Input[]
items: any[];
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Ở đây, chúng ta có một thuộc tính đầu vào items là một mảng của bất kỳ cấu trúc dữ liệu nào [giả sử là Json]
Chúng tôi cũng có một thuộc tính được gọi là tiêu đề trong đó chúng tôi sẽ lấy các tiêu đề từ đối tượng đầu vào
Toàn bộ điều kỳ diệu của bài đăng này là dòng mã này
this.headers = Object.keys[this.items[0]];
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Đây không phải là một tính năng của góc. Đây là tính năng của Javascript, tôi chỉ sử dụng nó trong mã góc cạnh của mình
Ở đây chúng tôi đang lấy phần tử đầu tiên từ mảng Json và lấy tất cả các khóa từ nó
Tiếp theo chúng ta sẽ xem phần HTML của nó
Hiển thị bảng tập tin. thành phần. html hiển thị dữ liệu ở định dạng bảng
{{header}}
{{item[header]}}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Trong thead
, chúng tôi đang lặp lại các tiêu đề và tạo một hàng tiêu đề
Trong
- John Paul, 10, 22
- Peter Jackson, 11, 35
- Will Smith, 12, 30
- Peter Paul, 13, 25
- Johnson Peter, 14, 34
- Eric Smidth, 15, 30
- John Paul, 10, 22
- Peter Jackson, 11, 35
- Will Smith, 12, 30
- Peter Paul, 13, 25
- Johnson Peter, 14, 34
- Eric Smidth, 15, 30