* ngFor角度5自举模式不起作用

Question

需要一些专家帮助才能以引导方式显示api-answer数据。（SO中与此相关的另一线程未回答此问题）

我有一个.ts文件，如下所示。 NgbdModal1Content和NgbdModalStacked是我遇到的麻烦。忽略NgbdModal2Content和NgbdModal3Content及其组件。

此外，我添加了一个睡眠部分，以确保api答案已返回并填充

getResultatFromFromApi3：字符串[] = [];

getResultatFromFromApi4：可观察[];

在渲染模态之前。在渲染模态之前，控制台记录了getResultatFromApiX。

import { Component, Injectable } from '@angular/core';
import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { GetApiService } from './get-api.service';
import { Observable } from 'rxjs/Observable';
import { Station } from './station';
import { Station2 } from './station2';



@Component({
    selector: 'app-modal-stacked',
    templateUrl: './modal-stacked2.html',

})

// tslint:disable-next-line:component-class-suffix
export class NgbdModal1Content {

  constructor(private modalService: NgbModal, public activeModal: NgbActiveModal) {}

  open() {
    this.modalService.open(NgbdModal2Content, {
      size: 'lg'
    });
  }

  open2() {
    this.modalService.open(NgbdModal3Content, {
      size: 'lg'
    });
  }
}

@Component({
  template: `
    <div class="modal-header">
      <h4 class="modal-title">Teststation 1</h4>
      <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <p>Kör test här!</p>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
</div>
  `
})
// tslint:disable-next-line:component-class-suffix
export class NgbdModal2Content {
  constructor(public activeModal: NgbActiveModal) {}
}

@Component({
    template: `
      <div class="modal-header">
        <h4 class="modal-title">Teststation 2</h4>
        <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Kör test här!</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
      </div>
    `
  })
  // tslint:disable-next-line:component-class-suffix
  export class NgbdModal3Content {
    constructor(public activeModal: NgbActiveModal) {}
  }

@Component({
  // tslint:disable-next-line:component-selector
  selector: 'ngbd-modal-stacked',
  templateUrl: './modal-stacked.html'
})


// tslint:disable-next-line:component-class-suffix
export class NgbdModalStacked {
  constructor(private modalService: NgbModal, private _getApiService: GetApiService) {}

  getResultatFromApi3: string [] = [];
  getResultatFromApi4: Observable<Station> [];

  getApiData: string [];


  // Triggered when opening Modal (that contains two buttons for two other modals
  open() {

    this._getApiService.method3Call().subscribe(function(data) {
      console.log('Test från Y-Tube-videon', data);
     this.getResultatFromApi4 = data;
     this.getResultatFromApi3 = data;
     console.log(this.getResultatFromApi4);
     console.log(this.getResultatFromApi3);
    });

    this.delay(5000).then(any => {
      this.modalService.open(NgbdModal1Content);
      console.log('du klickade på Teststationer');
      });

      }

      async delay(ms: number) {
        await new Promise(resolve => setTimeout(() => resolve(), ms)).then(() => console.log('fired'));
    }

  }

当我在NgbdModalStacked部分中触发Open（）并从控制台日志中答复时，我的api调用返回了信息：

我将NgbdModal1Content hmtl部分移动到一个单独的html文件中，以使其更加容易。该html文件如下所示：

<div class="modal-header">
  <h4 class="modal-title">Teststationer</h4>
  <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body">
  <p><button class="btn btn-lg btn-outline-primary" (click)="open()">Teststation 1 {{getResultatFromApi4}}</button></p>
  <p><button class="btn btn-lg btn-outline-primary" (click)="open2()">Teststation 2</button></p>

<p>hej2<p>



        <ul *ngFor="let data of getResultatFromApi3">
                <li>Reported: {{data.Name}} <span>Mer info</span></li>
              </ul>


<table>
          <tr *ngFor="let data of getResultatFromApi3">
                  <td>{{data.Name}}</td>
          </tr>
      </table>


      <ul>
      <li *ngFor="let data of getResultatFromApi4">
            {{data.Name}}
      </li>
    </ul>
        
        <ul>
        <li *ngFor="let data of getResultatFromApi4">
                {{data.Name}}
        </li>
        </ul>


    <p>hejigen2<p>

</div>
<div class="modal-footer">
  <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
</div>

但是它不输出数据（见下图），我听不懂我在做什么错？试过的data.Name和data.name都具有字符串和对象数组，但不显示api答案，但显示p中的其他内容。

我如何显示DATA.NAME显示？ 谢谢

Answer 1

public getResultatFromApi10 = [];

   this._getApiService.method3Call().subscribe(
  data => data.forEach(item => {this.getResultatFromApi10.push(item); })
);

此代码对我有用。另一个订阅将在console.log中输出信息，但不会将.ts中的任何数据携带到html部分，而push（item）似乎可以解决问题。

希望这可以帮助可能遇到相同问题的其他人。