Угловой 5 GET запрос не отвечает

Question

Я видел много подобных проблем, связанных с этой проблемой на этом сайте, но они, как правило, либо слишком специфичны (с 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>

Answer 1

Добавить ошибку =>, чтобы увидеть ошибку, а затем оттуда отладить. Вы должны увидеть на своей вкладке сети, если 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 2

В вашем коде данные - это массив и тип класса или интерфейса. Я бы определил профиль этого типа над вашим конструктором так:

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>

? - * Не забудьте включить это. Если это не сработает, дайте мне знать, и я буду рад помочь. Удачного кодирования ..

Answer 3

замените this.name на name и this.id на id в вашем HTML