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

Question

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

HTML。

<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 仅在输入更改来自模板时运行 像绑定一样。如果手动设置 像这个component.someInput = aValue，发生在外面 更改检测周期，您需要以某种方式让 Angular 知道 你改变了一些东西。

作为official docs 引用

一个生命周期钩子，当一个对象的任何数据绑定属性被调用时 指令的变化。定义一个 ngOnChanges() 方法来处理 变化。

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

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

constructor(private cd: ChangeDetectorRef) { }

然后使用

this.cd.detectChanges();

当你想用角度来检测变化时。

2。需要时给你打电话showSelectedDataView
每当您看到有变化并且应该更新数据视图时调用代码中所需的函数。

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

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

如果对象

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

更新stackblitz demo试试看。

希望这会有所帮助:)