基于API可观察到的答案的堆积模态

Question

（如果没有提供足够的信息，请问我ellaborate）需要帮助！

我已经制作了堆叠模态。我希望当前在另一个名为Teststationer的模式中的模式Teststation 1和Teststation 2可以根据我从服务器端返回的API答案（在打开模式Teststationer时）创建。

意思是，如果api回答中有两个项目，则应创建两个模态， 模态的名称应为item [2] .name，item [3] .name等

认为需要在第一个模板部分中完成工作。

1）测试站1 {{getResultFromApi4}}-即使尝试执行getResultFromApi4.name或getResultFromApi4 [0] .name，我也无法显示getResultFromAp4的内容，该怎么办？ getResultFromApi4是一个可正确设置的Observable。

2）* ngFor循环似乎根本不起作用，怎么办？ 我还需要一个解决方案/循环来实际创建模态Teststation 1和2的内容，具体取决于api答案中有多少。

这是我的modal-stacked.ts的样子（不同模板中的html）：

import { Component } 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';

@Component({
  template: `
    <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>




    <table>
        <tr *ngFor="let item of testArr">
            <td>{{item.id}}</td>
        </tr>
    </table>



    </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 NgbdModal1Content {

  getResultatFromApi3: string [] = [];
  getResultatFromApi4: Observable<Station> [];
  testArr: string[] = ['test', 'test2'];

  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) {}

  getApiData: string [];

  // Den här triggas när du öppnar modalen som heter Teststationer i modalen Produktionsfabrik XXX.
  open() {
    this.modalService.open(NgbdModal1Content);

console.log('du klickade på Teststationer');

    this._getApiService.method2Call().subscribe(
      data => this.getApiData = data as string [],
      error => alert(error + 'det blev fel modal-stacked.ts'),
      () => console.log('Finished method2Call' + this.getApiData));



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

      }

  }