Angular 5绑定到自定义属性

Question

我有角度组件将值传递给子组件，并且该子组件在 ngFor 中使用该值，父组件从服务获取原始值做 http 请求。

这是将“cats”传递给子道具 [catsToShow] 的 http 请求承诺的父组件

<div class="container">
  <div class="ddlContainer clearfix">
    <select class='select-option' [(ngModel)]='selectedCat' (ngModelChange)='onOptionsSelected($event)'>
      <option *ngFor='let cat of cats' [value]="cat.name">{{cat.name}}</option>
    </select>
  </div>
  <app-add-modal [catsToShow]="cats"></app-add-modal>
  <ul>
    <li *ngFor="let item of items">{{item.body}}</li>
  </ul>
</div>

这是子组件尝试生成 ngFor ：

<div class="btnContainer">
  <button type="button" class="btn btn-outline-success addNewModalOpener" (click)="openAddNewModal()">Add New</button>
</div>
<div id="addNewModal" class="formAddContainer">
  <form class="formAdd">
    <input class="form-control form-control-lg" type="text" placeholder="name" />
    <input class="form-control form-control-lg" type="text" placeholder="body" />
    <select class='select-option form-control'>
      <option *ngFor='let cat of catsToShow' [value]="cat.name">{{cat.name}}</option>
    </select>
    <button type="submit" class="btn btn-success">add</button>
  </form>
</div>

import { Component, OnInit, Input} from '@angular/core';

    declare var $:any;

    @Component({
      selector: 'app-add-modal',
      templateUrl: './add-modal.component.html',
      styleUrls: ['./add-modal.component.scss']
    })
    export class AddModalComponent implements OnInit{

      @Input() catsToShow;

      constructor() { }

      ngOnInit() {

          $(".formAddContainer").iziModal({ width: '80%', padding: 10, borderBottom: false, background: 'rgba(136, 160, 185,0)' });
          $('#addNewModal').iziModal('open');
        
      }

    }

我正在使用 iziModal 为用户初始化一个框以开始收集数据，下拉列表向用户显示没有 ngFor 生成的项目...所以如何首先同步绑定的输入值 [catsToShow] 以生成 ngFor 列表然后显示那些在 iziModal 框中给用户的项目

Answer 1

尝试等待模态的实例化，直到列表确实到达。

import { Component, OnInit, Input} from '@angular/core';

    declare var $:any;

    @Component({
      selector: 'app-add-modal',
      templateUrl: './add-modal.component.html',
      styleUrls: ['./add-modal.component.scss']
    })
    export class AddModalComponent implements OnInit{

      @Input() catsToShow;

      constructor() { }

     ngOnInit() {}

     ngOnChanges(changes: SimpleChanges) {

        if(changes.catsToShow) {

           $(".formAddContainer").iziModal({ width: '80%', padding: 10, borderBottom: false, background: 'rgba(136, 160, 185,0)' });
           $('#addNewModal').iziModal('open');

        }

    }