使 Angular Material UI 可访问并添加加载检查值

Question

我有一个 angular material 下拉菜单 select 或者我有多个选项可供选择。还有一个选项，我可以一次 select 所有选项。

我使用了这个 link, ( found it in answer for a similar ).

中的代码

这些是我的问题

stack blitz 中给出的解决方案并不完全可用。单击 space 条不会触发事件。
我尝试过的：使用 (onSelectionChange) 事件。但这将抛出 " Maximum call stack size exceeded" 一旦发生变化就会出现错误。
如何在加载时检查这些（select 所有）选项？
我尝试过的：添加 [checked]=true。但这会抛出 "Can't 绑定到 'checked'，因为它不是已知属性的 'mat-option'" 错误。

如何实现这些行为？

Answer 1

我找到了解决此问题的技巧（或实际解决方案）。随意编辑我的代码 原来我不是唯一遇到同样问题的人。尽管在这个 link 下有很多人遇到同样的问题。我的问题略有不同。我什至希望 'All' 选项可以通过键盘访问。而且我必须在加载时加载所有选项。

这是我为它编写的代码：

app.component.html

 <div class="ddHolder">
  <div>
    <form [formGroup]="selectYearsForm" autocomplete="off" >
      <mat-form-field appearance="fill">
        <mat-select formControlName="yearOption" multiple class="custom-select-csRp"
          panelClass="custom-select-panelCsrp mat-select-custom scrollcsrp" disableOptionCentering #selectcsrp
          contentTabIndex=null  #matSelect (selectionChange)="matOPtionChanged($event)">
  
          <mat-option #allSelected [value]="0">
            All
          </mat-option>
  
          <mat-option *ngFor="let year of selectedYearDD" [value]="year">
            {{year}}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </form>
  </div>
</div>

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { MatOption } from '@angular/material/core';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  toppings = new FormControl();
  selectYearsForm!: FormGroup;
  selectedYears: any = [];
  selectedYearDD: any = [];
  selectedYearDDCopy: any = [];

  
  @ViewChild('allSelected')
  private allSelected!: MatOption;


  constructor(
    private fb: FormBuilder
  ){

  }

  ngOnInit(): void {

    this.selectYearsForm = this.fb.group({
      yearOption: new FormControl('')
    });

    this.selectedYearDD = ['1999','2000','2001','2002','2003','2004','2005'];
    this.selectedYearDDCopy.push([...this.selectedYearDD.map((item: any) => item), 0])
  }

  ngAfterViewInit() {

    //if needed load all the values by default
    setTimeout(() => {
      this.selectYearsForm.controls.yearOption
        .patchValue([...this.selectedYearDD.map((item: any)=> item), 0]);

      this.selectedYears = [];
      this.selectYearsForm.controls.yearOption.value.forEach((item: any) => item == 0 ? "" : this.selectedYears.push(item));
  
    }, 1);

  }

  matOPtionChanged(event: { value: number[]; }) {

    const filteredArray = event.value.filter(val => !this.selectedYearDDCopy.includes(val));

    if (event.value.length == this.selectedYearDD.length && !event.value.includes(0)) {
      if (this.allSelected.selected || event.value.length - 1 == this.selectedYearDDCopy.length) {
        this.selectYearsForm.controls.yearOption
          .patchValue([...this.selectedYearDD.map((item: any)  => item), 0]);
      }
      else {
        this.selectYearsForm.controls.yearOption
          .patchValue([]);
      }
    }

    else if (filteredArray.length == 1 && filteredArray[0] === 0) {
      this.selectYearsForm.controls.yearOption
        .patchValue([...this.selectedYearDD.map((item: any)  => item), 0]);
    }

    else if (event.value.includes(0) && event.value.length - 1 < this.selectedYearDD.length) {
      event.value.shift();
      this.selectYearsForm.controls.yearOption
        .patchValue(event.value);
    }

    this.selectedYearDDCopy = this.selectYearsForm.controls.yearOption.value;

    this.selectedYears = [];
    this.selectYearsForm.controls.yearOption.value.forEach((item: any)  => item == 0 ? "" : this.selectedYears.push(item));

  }
}

使 Angular Material UI 可访问并添加加载检查值

Make Angular Material UI accessible and add on load check values

accessibility

angular-material

material-ui

angular