angular - 将数据从父母传递给孩子不能有条件地工作

问题描述

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

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

2 - 显示名称 ieSelect an Option等的占位符。

我正在使用@Input()并@Output()在孩子和父母之间进行互动，它对我来说非常有效。

我正在做的是，我<app-select></app-select>在父元素中显示了一个元素，而另一个元素是根据用户从第一个中选择一个选项时显示的<app-select></app-select>。例如，在第一个select选项中Monthly and Yearly，当用户选择时，Monthly将一种类型的数据加载到第二个select元素中，否则，在每年的选项中，会显示另一种类型的数据，这里就会出现问题。

Whenever any of the options Monthly or Yearlyis selected, the itemsare shown and the placeholder is set, but when I try to choose the second option, the placeholder changes but the data doesn't get binded to the view, and the itemsfrom first selection is shown. 我不知道是什么问题。

选择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'];
  }

从第一个选择选项时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;
  }

}

当我选择每月时，数据会传播

当我选择每年时，第二次选择的占位符会发生变化但数据不会发生变化，并且它会反映在视图中，您可以检查控制台。

标签： angularangular7

angular - 将数据从父母传递给孩子不能有条件地工作 - Angular 7/8

问题描述

解决方案

推荐阅读