将数据从 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'(也在模板中)
我正在处理 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'(也在模板中)