Làm cách nào để hiển thị một đối tượng JSON trong HTML Angular?
|
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 Show Hiển thị đối tượng JSON bằng chỉ thị ngFor – Angular 9Lệ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
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
Đầu ra được hiển thị, sẽ trông như thế này
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.
 VÂNG. Hãy xem mã Hãy tạo một thành phần chung 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 Vào chế độ toàn màn hình Thoát chế độ toàn màn hì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 Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Trong Trong
Làm cách nào để đọc tệp JSON trong Angular 8 bằng HTTP?Vì vậy, không mất nhiều thời gian, hãy bắt đầu. . Bước 1. Tạo một dự án góc mới. . Bước 2. Tạo tệp JSON với một số thông tin người dùng trong thư mục nội dung. . Bước 3. Nhập mô-đun máy khách http trong mô-đun gốc của chúng tôi. . Bước 4. Tiêm ứng dụng khách http trong thành phần của chúng tôi. . Bước 5. Sử dụng móc vòng đời OnInit, lấy dữ liệu JSON bằng http Làm cách nào để đọc tệp JSON trong Angular 12?nhập thông tin xác thực từ '. /config/thông tin xác thực. json'; . tên tài khoản; . // Thuộc tính tên người dùng. chuỗi = my_username; . }
Làm cách nào để thêm thẻ dữ liệu JSON trong HTML?4 Điều Bạn Phải Làm Khi Đưa HTML vào JSON. . Escape quotation marks used around HTML attributes like so ![](\"someimage.png\") .Thoát khỏi dấu gạch chéo về phía trước trong các thẻ kết thúc HTML. . Điều này là hoàn toàn kỳ lạ. . Đảm bảo mã hóa bất kỳ dấu ngoặc kép nào có thể được đưa vào nội dung HTML (xấu) |
