Làm cách nào để lấy dữ liệu từ tệp HTML sang tệp TS trong Angular 7?

Trong Angular, phép nội suy Chuỗi được sử dụng để hiển thị dữ liệu động trên mẫu HTML [ở cuối người dùng]. Nó tạo điều kiện cho bạn thực hiện các thay đổi trên thành phần. ts và tìm nạp dữ liệu từ đó vào mẫu HTML [thành phần. tệp html]

Ví dụ

thành phần. tập tin ts

Ở đây, chúng tôi đã chỉ định serverID và serverStatus với một số giá trị. Hãy sử dụng cái này trong "thành phần. tập tin html"

thành phần. tệp html

đầu ra

Nội suy chuỗi so với ràng buộc thuộc tính

Nội suy chuỗi và ràng buộc thuộc tính đều được sử dụng cho cùng một mục đích. e. cơ sở dữ liệu một chiều. Nhưng vấn đề là làm thế nào để biết cái nào phù hợp nhất với ứng dụng của bạn

Ở đây, chúng tôi so sánh cả về Điểm tương đồng, Khác biệt, Bảo mật và kết quả bạn nhận được

Điểm tương đồng giữa nội suy chuỗi và ràng buộc thuộc tính

Phép nội suy chuỗi và liên kết thuộc tính là về liên kết dữ liệu một chiều. Cả hai đều chuyển một giá trị theo một hướng từ các thành phần của chúng tôi sang các phần tử HTML

Nội suy chuỗi

Bạn có thể thấy trong ví dụ trên, Angular lấy giá trị của thuộc tính fullName từ thành phần và chèn nó vào giữa phần mở và phần đóng

phần tử sử dụng dấu ngoặc nhọn được sử dụng để chỉ định phép nội suy

Ràng buộc thuộc tính

Trong Liên kết thuộc tính, hãy xem cách Angular lấy giá trị từ thuộc tính fullName từ thành phần và chèn nó bằng thuộc tính html innerHtml của

thành phần

Cả hai ví dụ cho nội suy chuỗi và liên kết thuộc tính sẽ cung cấp cùng một kết quả

Sự khác biệt giữa nội suy chuỗi và ràng buộc thuộc tính

Nội suy chuỗi là một cú pháp đặc biệt được chuyển đổi thành ràng buộc thuộc tính bởi Angular. Đó là một sự thay thế thuận tiện cho ràng buộc tài sản

Khi bạn cần nối các chuỗi, bạn phải sử dụng phép nội suy thay vì ràng buộc thuộc tính

Ví dụ

Ràng buộc thuộc tính được sử dụng khi bạn phải đặt thuộc tính phần tử thành giá trị dữ liệu không phải chuỗi

Ví dụ

Trong ví dụ sau, chúng tôi vô hiệu hóa một nút bằng cách liên kết với thuộc tính Boolean isDisabled

Nếu bạn sử dụng phép nội suy thay vì liên kết thuộc tính, nút sẽ luôn bị tắt bất kể giá trị thuộc tính của lớp isDisabled là đúng hay sai

Chúng tôi có thể đọc các tệp JSON cục bộ trong Angular, một số cách khác nhau tùy thuộc vào phiên bản Angular mà chúng tôi đang sử dụng

Trong bài đăng này, tôi liệt kê ra các phương pháp khác nhau để đọc các tệp JSON trong các ứng dụng Angular

1. Bằng cách sử dụng giải quyếtJsonModule
2. Bằng cách sử dụng HttpClient
3. Bằng cách sử dụng câu lệnh nhập ES6

Mục lục

Giải pháp 1. Đọc các tệp JSON cục bộ bằng cách sử dụng resolveJsonModule trong Angular 7⁄6. 1 ở trên

Khung góc hỗ trợ TypeScript 2. 9 từ 6. 1 phiên bản trở đi

Trong bản thảo 2. 9 với sự trợ giúp của resolveJsonModule, chúng tôi có thể nhập các tệp JSON cục bộ giống như các mô-đun

Tôi đã thêm một tệp JSON mẫu trong thư mục nội dung của Ứng dụng góc. Hãy xem ví dụ json mẫu

{
"Post": "Angular Json Files",
"CanEdit": true,
"Version": 7
}

Tôi đã nhập sampleJson. json trong ReadingJsonFilesComponent của chúng tôi như hình bên dưới

import { Component, OnInit } from '@angular/core';
import SampleJson from '../../assets/SampleJson.json';

@Component[{
  selector: 'app-reading-json-files',
  templateUrl: './reading-json-files.component.html',
  styleUrls: ['./reading-json-files.component.css']
}]

export class ReadingJsonFilesComponent implements OnInit {

constructor[] {
 console.log['Reading local json files'];
 console.log[SampleJson];
}

ngOnInit[] {}

}

Bây giờ Nếu bạn xây dựng ứng dụng, bạn sẽ gặp lỗi sau

LỖI trong src/app/reading-json-files/reading-json-files. thành phần. ts[2,24]. lỗi TS2732. Không thể tìm thấy mô-đun ‘. /. /assets/SampleJson. json’. Cân nhắc sử dụng '–resolveJsonModule' để nhập mô-đun với '. tiện ích mở rộng json

Để loại bỏ lỗi trên, Trong tsconfig. json dưới các tùy chọn trình biên dịch, chúng ta cần thêm các cấu hình “resolveJsonModule” và ”esModuleInterop” thành true như minh họa bên dưới

{  "compilerOptions": {  "resolveJsonModule": true, "esModuleInterop": true } }

Một điều nữa bạn cần hiểu là nội dung tệp JSON đã nhập là loại an toàn. Trong phiên bản json ở trên là một số. Vì vậy, nếu bạn cố gắng thay đổi phiên bản thành chuỗi, nó sẽ báo lỗi

SampleJson.Version= "Seven"; //throws error as Version is of type number

Giải pháp 2. Đọc các tệp JSON cục bộ bằng cách sử dụng HttpClient trong Angular 5 hoặc 4

Trong các phiên bản trước của Angular như Angular 5 hoặc 4 để đọc các tệp json cục bộ, chúng tôi cần sử dụng

import { Component, OnInit } from '@angular/core';
import SampleJson from '../../assets/SampleJson.json';

@Component[{
  selector: 'app-reading-json-files',
  templateUrl: './reading-json-files.component.html',
  styleUrls: ['./reading-json-files.component.css']
}]

export class ReadingJsonFilesComponent implements OnInit {

constructor[] {
 console.log['Reading local json files'];
 console.log[SampleJson];
}

ngOnInit[] {}

}

0 từ

import { Component, OnInit } from '@angular/core';
import SampleJson from '../../assets/SampleJson.json';

@Component[{
  selector: 'app-reading-json-files',
  templateUrl: './reading-json-files.component.html',
  styleUrls: ['./reading-json-files.component.css']
}]

export class ReadingJsonFilesComponent implements OnInit {

constructor[] {
 console.log['Reading local json files'];
 console.log[SampleJson];
}

ngOnInit[] {}

}

1 và Có thể quan sát được từ

import { Component, OnInit } from '@angular/core';
import SampleJson from '../../assets/SampleJson.json';

@Component[{
  selector: 'app-reading-json-files',
  templateUrl: './reading-json-files.component.html',
  styleUrls: ['./reading-json-files.component.css']
}]

export class ReadingJsonFilesComponent implements OnInit {

constructor[] {
 console.log['Reading local json files'];
 console.log[SampleJson];
}

ngOnInit[] {}

}

2 như hình bên dưới

Chúng ta cần đưa HttpClient vào hàm tạo

import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Component[{
 selector: 'app-reading',
 templateUrl: './reading.component.html',
 styleUrls: ['./reading.component.css']
}]

export class ReadingComponent implements OnInit {
 private _jsonURL = 'assets/SampleJson.json';
 constructor[private  HttpClient] {
   this.getJSON[].subscribe[data => {
    console.log[data];
   }];
 }
 public getJSON[]: Observable {
   return this.http.get[this._jsonURL];
 }
 ngOnInit[] {
 }
}

HttpClient được giới thiệu trong Angular 4. 3, Nếu bạn đang sử dụng phiên bản Angular 4. 3 bên dưới sử dụng phương pháp dưới đây để đọc các tệp JSON

Làm cách nào để liên kết dữ liệu từ tệp HTML sang tệp TS trong Angular?

Làm cách nào để lấy giá trị từ HTML sang thành phần trong Angular?

Làm cách nào để thêm thẻ HTML vào tệp Angular ts?

Làm cách nào để nhập tệp HTML trong Angular?