mock的使用整理（angular中） angular.js

首先，我们建一个json文件，在根目录下assets下名为test.json

[ { "testjson":[ { "id":"123", "username":"abc3", "tel“:"123451" }, { "id":"1234", "username":"abc2", "tel“:"123452" }, { "id":"12345", "username":"abc1", "tel“:"123453" } ] } ]

启动项目yarn start。
浏览器上访问：localhost:4200/assets/test.json可以看到json数据。
如何获取呢？
通过初始化获取和事件获取，操作是一样的。
以事件为例：有个检索按钮绑定search()
ts中

search() { const req = new XMLHttpRequest(); req.open('GET', '/assets/test.json'); rep.onload = () => { // alert("1111"); 这个必须写完一套才能进入 this.dataTest = JSON.parse(req.response); // console.log(this.dataTest [0].testjson[2]['id']); json结构 } }

注意json结构获取方法，鼠标悬停在上有获取提示：

文章图片

画面上直接用即可。
hmtl中部分代码

id username tel {{dataTest [0].testjson[i]['id']}} {{dataTest [0].testjson[i]['username']}} {{dataTest [0].testjson[i]['tel']}}

第二种方式：

import { Component, OnInit } from '@angular/core'; // 引入需要 import { HttpClient, HttpClientModule } from '@angular/common/http'; @Component({ selector: 'app-header', templateUrl: './header.component.html', styleUrls: ['./header.component.css'] }) export class HeaderComponent implements OnInit {headData: any; constructor( private http: HttpClient ) { }ngOnInit(): void { // http://localhost:4200/assets/json/header.json 可访问 this.http.get('http://localhost:4200/assets/json/header.json').subscribe(data => { console.log(data); }); } }

【mock的使用整理（angular中）】