*ngFor in angular 5 bootstrap modal not working

Question

Need some expert help to show api-answer data in a bootstrap modal.(the other thread about this in SO did not answer this question)

I have a .ts file that looks like below. NgbdModal1Content and NgbdModalStacked are the ones I'm having trouble with. Ignore NgbdModal2Content & NgbdModal3Content and their components.

Also, I added a sleep part to make sure the api answer had come back and populated

getResultatFromApi3: string [] = [];

getResultatFromApi4: Observable<Station> [];

Before the modal is rendered. The getResultatFromApiX are console logged before modal is rendered.

 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')); } } 

My api call comes back with information when I trigger Open() in NgbdModalStacked part and answer looks like this, from console log:

I moved the NgbdModal1Content hmtl part to a separate html file to make it easier. That html file looks like this:

 <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> 

But it doesn't output the data (see pic below) and I can't understand what I'm doing wrong? Tried data.Name and data.name , have both string and object array but api answer is not displayed but the other things in p are displayed.

HOW DO I MAKE THE DATA.NAME SHOW? Thank you

Answer 1

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

This code made it work for me. The other subscribe would output info in the console.log but not carry any data from .ts to the html-part wheras the push(item) seem to have done the trick.

Hope this can help somebody else who might run into the same problem.