mock的使用整理（angular中）

首先，我们建一个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中部分代码

idusernametel

{{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);});}
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！