Question

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

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

2-一个占位符，显示名称，即Select an Option等。

我正在使用@Input()和@Output()在孩子和父母之间进行交互，对我来说效果很好。

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

无论何时选择任何选项Monthly or Yearly，都会显示items并设置占位符，但是当我尝试选择第二个选项时，占位符会发生变化，但不会获得数据绑定到视图，并显示第一个选择中的items。我不知道是什么问题。

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

}

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

当我选择“每年”时，第二个选择项的占位符会更改，但不会更改数据，并且它也会反映在视图中，您可以检查控制台。

Answer 1

您必须添加另一个组件生命周期方法：ngOnChanges，您在该方法中的基本操作与ngOnInit相同。

或者，摆脱“ selectItems”和“ selectPh”，而直接使用“ items”和“ ph”（也在模板中）

从父母到孩子的数据传递无法正常工作-Angular 7/8

1 个答案: