需要帮助从复选框和下拉选择中获取正确的值，以显示正确的数据

Question

我无法从Mat-Select和Mat-Checkbox获取要显示的正确数据。 我想做的是从已选择的用户那里获取值。从所选值中执行 if-else 语句以检查是否满足条件，如果满足，则显示正确的数据视图。 还希望在用户更新其选择时动态更改为正确的数据视图。 我有一个在 Stackblitz 上运行的示例应用程序：https://stackblitz.com/github/tatemcg/angular-mat-sample 感谢您的任何帮助。

目录。

<div>
<form>
<mat-form-field id="dropdown1">
<mat-label><h4>Continent</h4></mat-label>
<br />
<br />
<mat-select [(ngModel)]="selectedSource" name="food" (selectionChange)="changeSources($event.value)">
<mat-option *ngFor="let source of dataSources" [value]="source.id">
{{source.sourceName}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field id="dropdown2">
<mat-label><h4>Country</h4></mat-label>
<br />
<br />
<mat-select [(ngModel)]="selectedType" name="foods" (selectionChange)="changeCountryType($event.value)">
<mat-option *ngFor="let countryType of countryTypes" [value]="countryType.id">
{{countryType.countryType}}
</mat-option>
</mat-select>
</mat-form-field>
</form>
</div>
<div>
<mat-drawer-container class="example-container">
<mat-drawer class="insideDiv" #sideNav mode="side" opened="true" [position]="nav_position">
Population Year
<ul style="list-style-type:none;">
<li>
<mat-checkbox id="year2000" [(ngModel)]="twoThousandChecked" (change)="onYearCheckboxChange($event, '2000')"> 2000 </mat-checkbox>
</li>
<li>
<mat-checkbox [(ngModel)]="twoThousand10Checked" (change)="onYearCheckboxChange($event, '2010')"> 2010</mat-checkbox>
</li>
</ul>
Gender
<ul style="list-style-type:none;">
<li>
<mat-checkbox id="femaleCheckBox" [(ngModel)]="femaleChecked" (change)="onGenderCheckboxChange($event, 'female')"> Female </mat-checkbox>
</li>
<li>
<mat-checkbox [(ngModel)]="maleChecked" (change)="onGenderCheckboxChange($event, 'male')"> Male</mat-checkbox>
</li>
</ul>
</mat-drawer>
<mat-drawer-content>
<button class="expandCollapseBTN" (click)="sideNav.toggle()" mat-button> Expand/Collapse </button>
<div #dataViewNode id="dataNode">
<br />
<br />
<br />
<br />
<br />
<h3>Here is your data for {{selectedType}} and {{yearNum}} and {{genderChoice}}</h3>
</div>
</mat-drawer-content>
</mat-drawer-container>
</div>

TS

export class DataViewComponent implements OnInit, OnChanges {

public selectedSource: string;
public selectedType: string;

dataSources = [
{ id: 'id1', sourceName: 'North America' }
];
countryTypes = [
{ id: 'id1', countryType: 'Canada' },
{ id: 'id2', countryType: 'Mexico' },
{ id: 'id3', countryType: 'United States' }
];
constructor() { }
changeSources(data) {
alert("Continent " + data);
console.log("Continent " + this.selectedSource);
this.showSelectedDataView(this.selectedSource, this.selectedType, this.yearNum);
}
changeCountryType(data) {
alert("Country Selected" + data);
console.log("Country Selected " + this.selectedType);
this.showSelectedDataView(this.selectedSource, this.selectedType, this.yearNum);
}
public yearNum = []; twoThousandChecked; twoThousand7Checked;
public genderChoice = []; femaleChecked; maleChecked;
onYearCheckboxChange(event, value) {
if (event.checked) {
this.yearNum.push(value);
this.yearNum = [...this.yearNum];
alert("Year " + this.yearNum);
}
if (!event.checked) {
let index = this.yearNum.indexOf(value);
if (index > -1) {
this.yearNum.splice(index, 1);
this.yearNum = [...this.yearNum];
}
}
this.showSelectedDataView(this.selectedSource, this.selectedType, this.yearNum);
console.log("Year List " + this.yearNum);
}
onGenderCheckboxChange(event, value) {
if (event.checked) {
this.genderChoice.push(value);
this.genderChoice = [...this.genderChoice];
alert("Gender " + this.genderChoice);
}
if (!event.checked) {
let index = this.genderChoice.indexOf(value);
if (index > -1) {
this.genderChoice.splice(index, 1);
}
}
this.showSelectedDataView(this.selectedSource, this.selectedType, this.yearNum);
console.log("Gender List: " + this.genderChoice);
}
ngOnInit() {
}
ngOnChanges() {
this.showSelectedDataView(this.selectedSource, this.selectedType, this.yearNum);
}
showSelectedDataView(selectedSource: string, selectedType: string, yearNum: any) {
if (this.selectedSource === 'id1' && this.selectedType === 'id1') {
alert("You Selected Data For " + this.selectedSource + " " + this.selectedType)
console.log(" North America and Canada");
}
else if (this.selectedSource === 'id1' && this.selectedType === 'id2') {
alert("You Selected Data For " + this.selectedSource + " " + this.selectedType)
console.log(" North America and Mexico");
}
else if (this.selectedSource === 'id1' && this.selectedType === 'id3') {
alert("You Selected Data For " + this.selectedSource + " " + this.selectedType)
console.log(" North America and United States");
}
else if (this.selectedSource === 'id1' && this.selectedType === 'id1') {
for(var i = 0; i < yearNum.length(); i++)
{
if(yearNum[i] === '2000')
{
alert("You Selected Data For " + this.selectedSource + " " + this.selectedType + " and Year " + this.yearNum)
console.log(" North America and Canada and 2000 ");
}
}
}
else if (this.selectedSource === 'id1' && this.selectedType === 'id1' && this.yearNum === this.twoThousandChecked && this.genderChoice === this.maleChecked) {
alert("You Selected Data For " + this.selectedSource + " " + this.selectedType + " and Year " + this.yearNum + " and for " + this.genderChoice)
console.log(" North America and Canada and 2000 and Male");
}
}
}

Answer 1

代码中的问题在于以下代码

ngOnChanges(( { this.showSelectedDataView((; }

当用户选中任何复选框时，永远不会触发此操作。这背后的原因是

ngOnChanges 仅在输入更改来自模板时运行 绑定像 .如果您手动设置 就像这个组件一样.someInput = aValue，发生在 更改检测周期，您需要以某种方式让 Angular 知道 你改变了一些东西。

正如官方文档引用的那样

当 指令更改。定义一个 ngOnChanges(( 方法来处理 变化。

所以为了解决问题，你能做的就是。

1. 使用以下方法手动触发更改检测

constructor(private cd: ChangeDetectorRef) { }

，然后使用

this.cd.detectChanges();

当您希望角度检测变化时。

2. 在需要时
调用函数showSelectedDataView，只要您看到有更改，并且应该更新 DataView 调用代码中的所需函数。

此外，当您使用数组和对象时，如果您使用.push或更改不会触发更改检测的键的值。在这种情况下，您可以使用以下内容来触发更改检测。

this.yearNum = [...this.yearNum];

如果对象

const obj = {val: '123'}
obj.val = '345';
obj = {...obj}

让更新堆栈闪电战演示尝试一下。

希望这对:)有所帮助