составные модалы на основе API Observable ответа - PullRequest
Новая
       55

составные модалы на основе API Observable ответа

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

(пожалуйста, попросите меня сообщить, если предоставлено недостаточно информации) нужна помощь!

Я сделал составленные модалы.Мне бы хотелось, чтобы вместо этого были созданы модалы Teststation 1 и Teststation 2, которые в настоящее время находятся в другом модале под названием Teststationer, на основе ответа API, который я получаю со стороны сервера (при открытии модального Teststationer).

Это означает, что если в ответе API есть два элемента, то должны быть созданы два модальных типа, а имя модальных элементов должно быть item [2] .name, item [3] .name etc

enter image description here

Думаю, что работа должна быть выполнена в первой части шаблона.

1) Тестовая станция 1 {{getResultFromApi4}} - я не могу показать что-либо из getResultFromAp4, даже если я пытаюсь сделать getResultFromApi4.name или getResultFromApi4 [0] .name, что делать?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);
       });

      }

  }
...