單擊按鈕時顯示 Json 資料并使某個元素顯示 Json 資料。
結果：
代碼結果
TS：
import UsersJson from '../../assets/users.json'; //Json file location
export class UsersComponent implements OnInit {
getUsers(special:any):void{
special.innerText = JSON.stringify(UsersJson).replace(/,|}|{|\\/g, "\n");
constructor() { }
ngOnInit(): void { }
}
HTML：
<div class="wrapper">
<button (click)="getUsers(lblName)">Show All Users</button>
</div>
<pre #lblName></pre>
我的 GitHub 上的完整檔案 https://github.com/LearAdini/AngularJsonPipe
uj5u.com熱心網友回復：
您可以將 Angular 內置json管道用作：
{{ value_expression | json }}
JsonPipe API 檔案
例子：
HTML檔案：
<button (click)="getUsers()">Show All Users</button>
<h4 *ngIf="users">{{ users | json }}</h4>
用戶組件類：
export class UsersComponent implements OnInit {
users: any;
getUsers() {
// fetch the json data and assign it to -> this.users
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/395879.html