角5 GET请求不响应(Angular 5 GET request nonresponsive)

我已经看到了关于这个网站这个问题很多类似的问题，但他们往往是要么太具体（使用Django，Python和弹簧等）或太落伍了。

我使用角5和引导，使用Chrome调试，和我的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>

Answer 1:

更换this.name与name和this.id与id在你的HTML

Answer 2:

添加错误=>查看错误，然后从那里调试。 你应该在你的网络选项卡上，如果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);
         }

         )

Answer 3:

在代码中，数据是一个数组，是一种类型的类或接口。 我会定义该类型的轮廓构造函数上面，像这样，

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>

？ - *不要忘了包括这一点。 如果这也不行，让我知道，我会很乐意提供帮助。 编码愉快..

文章来源: Angular 5 GET request nonresponsive