Блог

Чтобы отобразить данные, полученные из Api, я применил директиву *ngFor к тегу li . Затем я использовал интерполяцию, чтобы показать данные внутри тега li . Но я не получаю никаких данных в списке. Однако в списке отображается точно такое же количество пустых элементов списка, как и количество элементов, доступных в данных, полученных из API. Если я регистрирую данные внутри метода подписки, браузер регистрирует данные, полученные из api, но когда я регистрирую данные вне метода подписки, браузер регистрирует неопределенный объект. Я прикрепил свои коды. Я буду признателен за любую помощь и советы.

Я попытался применить условие *ngIf, чтобы сделать список видимым только после того, как данные уже подписаны в родительском теге ul ngOnInit для li, как было предложено в одном из других сообщений.

 branch-list.component.ts

constructor(private service : BranchService) {  }
  ngOnInit() {
    this.service.getAll()
    .subscribe((data: Branch[]) => {
      this.branches = data;
      console.log(this.branches);
    });
    console.log(this.branches);
  };


branch-list.component.html

<ul class="list-group-flush" *ngIf="branches">
    <li *ngFor="let branch of branches; let serialNo = index" class="list-group-item">
      <span hidden>{{branch.Id}}</span>
      {{ serialNo 1 }}. {{ branch.BranchCode }} {{ branch.Description }}
    </li>
  </ul>
<ul>


console of browser

Angular is running in the development mode. Call enableProdMode() to enable the production mode.

undefined   

(7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {id: 1, branchCode: "KTM", description: "Kathmandu"}
1: {id: 2, branchCode: "PKH", description: "Pokhara"}
2: {id: 3, branchCode: "HTD", description: "Hetauda"}
3: {id: 4, branchCode: "MHN", description: "Mahendranagar"}
4: {id: 5, branchCode: "JHP", description: "Jhapa"}
5: {id: 6, branchCode: "KTM", description: "Kathmandu"}
6: {id: 7, branchCode: "PTN", description: "PTN"}
length: 7
__proto__: Array(0)

  

Предполагается, что список отображает данные, зарегистрированные в консоли.Консоль регистрирует данные, как и ожидалось. Но на странице отображается пустой список. Пустой список обновляется только и показывает значение серийного номера, но и код ветки, и описания пусты.

Изначально заданные ветви = null;

Вместо выполнения вызова API в ngOnInit попробуйте в ** ngAfterViewInit** — место, где отображается DOM

   ngAfterViewInit() {
    this.service.getAll()
    .subscribe((data: Branch[]) => {
      this.branches = [...data];
      console.log(this.branches);
    });
  };
  

 <ul class="list-group-flush" *ngIf="branches amp;amp; branches.length">
    <li *ngFor="let branch of branches; let serialNo = index" class="list-group-item">
      {{ serialNo 1 }}. {{ branch.BranchCode }} {{ branch.Description }}
    </li>
  </ul>
<ul>
  

Насколько я понимаю, я думаю, что это сработает, попробуйте и обновите