在此站点上,我已经看到许多与此问题相关的类似问题,但它们要么过于具体(使用Django,Python,Spring等),要么过时了。
我正在使用Angular 5和Bootstrap,正在使用Chrome进行调试,并且我的GET请求没有得到GET,或者给我任何错误,或者没有做任何事情。输出为零时,我不确定我做错了什么。
我的.ts文件代码:
onNameKeyUp(event:any) {
this.id = event.target.value; //sets input to the object's id
this.found = false;
}
getProf() {
this.httpClient.get(`api_url/${this.id}`)
.subscribe(
(data:any[]) => {
if(data.length) {
this.name = data[0].name;
this.id = data[0].id;
this.found = true;
}
}
)
}
我的component.html代码:
<input type="text" (keyup)="onNameKeyUp($event)">
<button type="button" (click)="getProf()">Get Profile</button>
<div *ngIf="found">
<div>{{this.name}}'s id is {{this.id}}</div>
</div>
答案 0 :(得分:2)
在您的HTML中用this.name
替换name
,并用this.id
替换id
答案 1 :(得分:0)
添加错误=>以查看错误,然后从那里进行调试。您应该会在网络标签中看到404、500、200等。
this.httpClient.get(`api_url/${this.id}`)
.subscribe(
(data:any[]) => {
if(data.length) {
this.name = data[0].name;
this.id = data[0].id;
this.found = true;
}
},
error => {
console.log('See Error: ', error);
}
)
答案 2 :(得分:0)
在您的代码中,数据是一个数组,是一种类或接口。我会像这样在您的构造函数上方定义该类型的配置文件,
profile: any;
constructor(...) {}
如果您获得有效数据:
if(data.length) {
this.name = data[0].name;
this.id = data[0].id;
this.found = true;
console.log(data); // ---------> this should be an array (F12 developers tool).
this.profile = data[0]; // should not give you an exception error.
}
}
然后输入您的html代码。
<div *ngIf="found">
<div>{{profile?.name}}'s id is {{profile?.id}}</div>
</div>
? -*不要忘记包括这个。如果这不起作用,请告诉我,我们很乐意提供帮助。编码愉快。.