* ngFor в угловых 5 мод начальной загрузки не работает - PullRequest
Новая
       13

* ngFor в угловых 5 мод начальной загрузки не работает

0 голосов
/ 26 октября 2018

нужна помощь специалиста, чтобы показать данные api-ответа в модале начальной загрузки (другой поток по этому поводу в SO не ответил на этот вопрос)

У меня есть файл .ts, который выглядит ниже.У меня проблемы с NgbdModal1Content и NgbdModalStacked.Игнорировать NgbdModal2Content & NgbdModal3Content и их компоненты.

Кроме того, я добавил спящую часть, чтобы убедиться, что ответ API возвращен и заполнен

getResultatFromApi3: string [] = [];

getResultatFromApi4: Observable [];

до визуализации модальной модели.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'));
    }

  }

Мой вызов API возвращается с информацией, когда я запускаю Open () в части NgbdModalStacked, и ответ выглядит так, из журнала консоли: enter image description here

Я переместил часть hmtl NgbdModal1Content в отдельный 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 SHOW?Спасибо

enter image description here

1 Ответ

0 голосов
/ 30 октября 2018 

public getResultatFromApi10 = [];

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

Этот код заставил меня работать.Другая подписка будет выводить информацию в console.log, но не будет переносить какие-либо данные из .ts в html-часть, когда push (item), кажется, добился цели.

Надеюсь, это может помочь кому-то еще, ктоможет столкнуться с той же проблемой.

...