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

我无法从Mat Select和Mat复选框中获取要显示的正确数据。 我想做的是从已选择的用户那里获取值。从选择的值执行if-else语句以检查是否满足条件，if-met显示正确的数据视图。还希望在用户更新其选择时动态更改为正确的数据视图。 我在Stackblitz上运行了示例应用程序： 谢谢你的帮助

Html

大陆




{{source.sourceName}
国家




{{countryType.countryType}
人口年


2000


2010


性别


女性


男性


展开/折叠










这是您的{{selectedType}}和{{dearneum}}和{{genderChoice}的数据

TS

导出类DataViewComponent实现OnInit、OnChanges{
公共选择源：字符串；
公共选择类型：字符串；
数据源=[
{id:'id1'，sourceName:'North America'}
];
国家类型=[
{id:'id1'，countryType:'Canada'}，
{id:'id2'，countryType:'Mexico'}，
{id:'id3'，countryType:'United States'}
];
构造函数（）{}
变更来源（数据）{
警报（“大陆”+数据）；
console.log（“大陆”+此.selectedSource）；
this.showSelectedDataView（this.selectedSource、this.selectedType、this.dearneum）；
}
changeCountryType（数据）{
警报（“选定国家”+数据）；
console.log（“所选国家/地区”+此.selectedType）；
this.showSelectedDataView（this.selectedSource、this.selectedType、this.dearneum）；
}
公共预算额=[]；两千已核对；两千已核对；
公共性别选择=[]；女性检查；男性检查；
onYearCheckboxChange（事件、值）{
如果（已选中事件）{
这个。渴望。推动（价值）；
this.dearneum=[…this.dearneum]；
警觉（“年”+本月）；
}
如果（！event.checked）{
设index=this.drawnum.indexOf（value）；
如果（索引>-1）{
这是一个完整的拼接（索引1）；
this.dearneum=[…this.dearneum]；
}
}
this.showSelectedDataView（this.selectedSource、this.selectedType、this.dearneum）；
console.log（“年份列表”+this.um）；
}
onGenderCheckboxChange（事件、值）{
如果（已选中事件）{
这个.genderChoice.push（值）；
this.genderChoice=[…this.genderChoice]；
警惕（“性别”+这个性别选择）；
}
如果（！event.checked）{
设index=this.genderChoice.indexOf（value）；
如果（索引>-1）{
这个。性别选择。剪接（索引，1）；
}
}
this.showSelectedDataView（this.selectedSource、this.selectedType、this.dearneum）；
console.log（“性别列表：“+this.genderChoice”）；
}
恩戈尼尼特（）{
}
ngOnChanges（）{
this.showSelectedDataView（this.selectedSource、this.selectedType、this.dearneum）；
}
显示SelectedDataView（selectedSource:string、selectedType:string、Forwardum:any）{
if（this.selectedSource==='id1'&&this.selectedType=='id1'）{
警报（“您为“+this.selectedSource+”“+this.selectedType”选择了数据）
console.log（“北美和加拿大”）；
}
else if（this.selectedSource=='id1'&&this.selectedType=='id2'）{
警报（“您为“+this.selectedSource+”“+this.selectedType”选择了数据）
console.log（“北美和墨西哥”）；
}
else if（this.selectedSource=='id1'&&this.selectedType=='id3'）{
警报（“您为“+this.selectedSource+”“+this.selectedType”选择了数据）
console.log（“北美和美国”）；
}
else if（this.selectedSource=='id1'&&this.selectedType=='id1'）{
for（var i=0；i

您代码中的问题在于下面的代码

ngOnChanges（）{ 这个.showSelectedDataView（）； }

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

ngOnChanges仅在输入更改来自模板时运行 像装订一样。如果您手动设置 与component.someInput=aValue类似，这发生在 改变检测周期，你需要让Angular知道这一点 你改变了一些事情

引用

生命周期挂钩，当 指令更改。定义一个ngOnChanges（）方法来处理 变化

所以为了解决这个问题

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

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

constructor(private cd: ChangeDetectorRef) { }

this.cd.detectChanges();

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

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