Javascript 角度5获取请求无响应

我在这个网站上看到过许多类似的问题，但它们要么太具体（使用Django、Python、Spring等），要么太过时

我使用Angular 5和Bootstrap，使用Chrome进行调试，我的GET请求没有得到，或者没有给我任何错误，或者做任何事情，真的。在零输出的情况下，我不确定我做错了什么

My.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;
      }
    }
  )
}

My 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>

获取配置文件
{{this.name}的id是{{this.id}
在HTML中将
这个.name
替换为
名称
，将
这个.id
替换为
id
在HTML中将
这个.name
替换为
名称
，将
这个.id
替换为
id
添加错误=>以查看错误，然后从那里调试。您应该在网络选项卡中看到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);
         }

         )

添加error=>以查看错误，然后从那里进行调试。您应该在网络选项卡中看到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);
         }

         )

在代码中，数据是一个数组，是类或接口的一种类型。我会在你的构造函数上面定义一个这样的配置文件

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>


{{profile？.name}的id是{{profile？.id}

？-*别忘了包括这个。如果这不起作用，请告诉我，我很乐意帮忙。快乐编码..
在代码中，数据是一个数组，是类或接口的一种类型。我会在你的构造函数上面定义一个这样的配置文件

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>


{{profile？.name}的id是{{profile？.id}

？-*别忘了包括这个。如果这不起作用，请告诉我，我很乐意帮忙。快乐编码..
是
get（`api\u url/${this.id}`）
实际的代码吗？或者在您的实际代码中，“api_url”是否被替换为实际url？在我的代码中，它被替换为实际url。如果您查看开发人员工具（F12）网络选项卡，是否可以看到正在发出的请求？响应是否如您所期望的那样？是的，它正确地显示了正确的url，其中包含请求的id，并且旁边的状态为200。
get（`api\u url/${this.id}`）
是实际的代码吗？或者在您的实际代码中，“api_url”是否被替换为实际url？在我的代码中，它被替换为实际url。如果您查看开发人员工具（F12）网络选项卡，是否可以看到正在发出的请求？响应是否与您期望的一致？是的，它正确显示了正确的url，其中包含请求的id，并且旁边的状态为200。如果我这样做，则会出现错误“找不到名称'name'”或“找不到名称'id'”。请删除html中的
此
，而不是typescript文件。我的错！但是我仍然没有得到任何输出。如果我这样做，我会得到错误“找不到名称‘name’”“找不到名称‘id’”。请删除html中的
此
，而不是键入脚本文件。我的错误！但我仍然没有得到任何输出。