Question

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

这是父组件传递＆＃34;猫＆＃34;它来自http请求承诺儿童道具[catsToShow]

＆＃13;

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

＆＃13;

这是子组件尝试生成ngFor：

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

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

SELECT f_name, l_name, t.first_name, t.t_id, p.p_id, p.paid_amount, p.family_id, date,
       (select sum(p.paid_amount) from payments) as all_paid
FROM payments p LEFT JOIN
     family f
     ON f.id = p.family_id LEFT JOIN
     teachers t
     ON f.teacher_id = tetchers.t_id;

Angular 5绑定到自定义属性

1 个答案: