Angular select 初始值

Question

我想要 default/initial 值 material select。我尝试添加 [(value)]=initialValue，[value]=initialValue。但它们不起作用。我在 table 中列出了建筑物。而且每栋楼都有几个侧翼（我把大楼分成几部分，就像在医院里你有不同的大楼部分）。我使用 select 显示建筑物的所有侧翼，以便用户可以 select 他想要哪一个。但我希望在用户选择之前选择默认值。

<mat-form-field  *ngIf="getSpecificPodZg(element.key).length" >
                <mat-label>Podzgrada</mat-label>
                <mat-select [(value)]="selectedPod"  [(ngModel)]="is_selected[i]" disableOptionCentering class="mySelectClass">
                  <mat-option *ngFor="let zgrada of getSpecificPodZg(element.key)" [value]="zgrada.key" required >
                    {{zgrada.ime}}
                  </mat-option>
                </mat-select>
              </mat-form-field>

我的 ts 文件有函数

  getSpecificPodZg(zg_idd:String){
  

    this.SpecificPodZg=[];
    this.PodZgrada.forEach((element: any) => {
      if(element.zg_id==zg_idd){
      this.SpecificPodZg.push(element);
      }

    });
    return this.SpecificPodZg;

也试过这个：[selected]

<mat-form-field  *ngIf="getSpecificPodZg(element.key).length" >
                <mat-label>Podzgrada</mat-label>
                <mat-select   [(ngModel)]="is_selected[i]" disableOptionCentering class="mySelectClass">
                  <mat-option *ngFor="let zgrada of getSpecificPodZg(element.key); let i = index" [value]="zgrada.key" [selected]="i===0"  >
                    {{zgrada.ime}}
                  </mat-option>
                </mat-select>
              </mat-form-field

Answer 1

首先：

[(value)]="selectedPod" 
[(ngModel)]="is_selected[i]"

这些下面坐着什么？如果我理解正确的话，你尝试在这里绑定两个不同的变量。在那个 mat-option 值指向特定属性 [value]="zgrada.key" 和 select value/ngModel 绑定的顶部也应该指向相同的属性否则空白 space 可能会在初始 select.

之后显示

我建议使用响应式表单来处理 mat-form-fields 中的数据。然后，您可以轻松订阅 ngOnInit 中的表单更改并输出数据，以便您可以跟踪更改。粗略的例子（你需要将 ReactiveFormsModule 包含到你的模块中并将表单相关的导入到实际组件中）：

foo.component.html:

<form [formGroup]="myForm">
  ...
  <mat-form-field  *ngIf="getSpecificPodZg(element.key).length" >
    <mat-label>Podzgrada</mat-label>
    <mat-select formControlName="myListField" disableOptionCentering class="mySelectClass">
      <mat-option *ngFor="let zgrada of getSpecificPodZg(element.key)" [value]="zgrada.key" required >
        {{zgrada.ime}}
      </mat-option>
    </mat-select>
  </mat-form-field>
  ...
</form>

foo.component.ts:

myForm: FormGroup;

constructor(private fb: FormBuilder) { }

ngOnInit(): void {
  this.myForm = this.fb.group({
    myListField: initial_value_here // here you put initial value to a select field, needs to be the same as value of option you want to pick; myListField is a formControlName used with mat-select
  });

  // listening to form changes
  this.myForm.valueChanges.subscribe(c => {
    console.log('form changes', c);
  });
}

Answer 2

要为字段分配默认值，您必须首先使用 ngModel 将其绑定到变量：

  <mat-form-field  *ngIf="getSpecificPodZg(element.key).length" >
    <mat-label>Podzgrada</mat-label>
    <mat-select [(ngModel)]="initialValue">
      <mat-option *ngFor="let zgrada of table" [value]="zgrada.key" required >
        {{zgrada.ime}}
      </mat-option>
    </mat-select>
  </mat-form-field>

然后在您的 .ts 文件中分配一个初始值（默认值必须从同一个数组分配，该数组用于创建您的 mat-option 元素）：

table = [{ime: "...", "key": "..."}, {ime: "...", "key": "..."}, {ime: "...", "key": "..."}]
initialValue = table[0].key

Angular select 初始值

Angular select with initial value

html

forms

select

angular-material

angular