Angular 5 GET请求无响应

时间:2018-07-05 20:17:51

标签: javascript angular bootstrap-4

在此站点上,我已经看到许多与此问题相关的类似问题,但它们要么过于具体(使用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>

3 个答案:

答案 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>

? -*不要忘记包括这个。如果这不起作用,请告诉我,我们很乐意提供帮助。编码愉快。.