将数据从 parent 传递到 child 无法有条件地工作 - Angular 7/8

Passing data from parent to child not working conditionally - Angular 7/8

我正在处理 Angular 7/8 应用程序。我创建了一个自定义 Select 元素作为组件。无论我在哪里集成组件,我都会向它传递两个东西。

1 - select 元素应显示为选项的 items 数组。

2 - 显示名称的占位符,即 Select an Option

我正在使用 @Input()@Output() 在 child 和 parent 之间进行交互,它非常适合我。

我正在做的是,我在 parent 中显示了一个 <app-select></app-select> 元素,而另一个是根据用户 select 从首先<app-select></app-select>。例如,在第一个 select 中有 Monthly and Yearly 选项,当用户 selects Monthly 然后在第二个 select 元素中加载一种类型的数据,否则,在年度选项上,显示另一种类型的数据,这里就会出现问题。

每当 Monthly or Yearly 中的任何一个选项被 select 编辑时,都会显示 items 并设置占位符,但是当我尝试选择第二个选项时,占位符会发生变化但是数据没有绑定到视图,并且显示了来自第一个 selection 的 items。不知道是什么问题

select Select或

<div class="col-sm-12 col-md-6 col-lg-4 cp-sec">
   <app-select [items]='paymentBasisItems' [ph]="pbPh" (selectedItem)='paymentBasisSelected($event)'></app-select>
</div>
<div class="col-sm-12 col-md-6 col-lg-4 cp-sec" *ngIf="isPaymentBasisSelected">
   <app-select [items]='paymentTimeItems' [ph]="ptPh" (selectedItem)='paymentTimeSelected($event)'></app-select>
</div>

变量

  public paymentBasisItems: Array<any>;
  public pbPh: string;
  public paymentTimeItems: Array<any>;
  public ptPh: string;

初始化第一个Select

  ngOnInit() {
    this.pbPh = 'Select Payment Basis';
    this.paymentBasisItems = ['Monthly', 'Yearly'];
  }

When an Option is Selected from the first Select

  paymentBasisSelected(event: any) {
    if (event === 'Monthly') {
      this.isPaymentBasisSelected = true;
      this.ptPh = 'Select Number Of Months';
      this.paymentTimeItems = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
    } else if (event === 'Yearly') {
      this.isPaymentBasisSelected = true;
      this.ptPh = 'Select Number Of Years';
      this.paymentTimeItems = ['select', 'a', 'year', 'nadeem', 'khan'];
    } else {
      this.isPaymentBasisSelected = false;
    }
  }

select

的组件代码

//Template
<div class="an-select">
    <div class="ans-head waves-effect waves-dark" (click)="toggleOpenSelect($event)" data-an-selected>{{ph}}</div>
    <div class="ans-opts">
        <div class="option waves-effect waves-light" *ngFor="let item of selectItems" (click)="optionSelected(item)">{{item}}</div>
    </div>
</div>





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

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

  constructor() { }

  @Input() items;
  @Input() ph;

  @Output() selectedItem = new EventEmitter();

  public selectItems: Array<any>;
  public selectPh: string;
  public currEle;
  public currEleShown = false;

  toggleOpenSelect(event) {


    this.currEle = event.target;
    if (!this.currEleShown) {
      (this.currEle.parentNode as any).querySelector('.ans-opts').style.display = 'block';
      this.currEleShown = true;
    } else if (this.currEleShown) {
      (this.currEle.parentNode as any).querySelector('.ans-opts').style.display = 'none';
      this.currEleShown = false;
    }
  }

  optionSelected(item) {
    this.ph = item;
    this.selectedItem.emit(item);
    (this.currEle.parentNode as any).querySelector('.ans-opts').style.display = 'none';
    this.currEleShown = false;
  }

  ngOnInit() {
    this.selectItems = this.items;
    this.selectPh = this.ph;
  }

}

当我select每月传播数据

当我Select每年,第二个select的占位符发生变化但数据没有变化,并且它反映在视图中,您可以查看控制台。

您必须添加另一个组件生命周期方法:ngOnChanges,基本上与 ngOnInit 中的方法相同。

或者,去掉 'selectItems' 和 'selectPh',直接使用 'items' 和 'ph'(也在模板中)