применение * ngFor для <li>показывает только список с пустыми данными, а выборка данных из API в ngOnInit ()? - PullRequest
Новая
       12

применение * ngFor для <li>показывает только список с пустыми данными, а выборка данных из API в ngOnInit ()?

0 голосов
/ 20 апреля 2019

Чтобы показать данные, полученные из 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)

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

1 Ответ

1 голос
/ 20 апреля 2019

Первоначально установленное значение branch = null;

Вместо выполнения вызова API в ngOnInIt try in ** ngAfterViewInit ** - место, где отображается DOM 

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

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

С моим пониманием я думаю, что будет работать, попробуйте и обновить

...