Question

我的mat-select和mat-option控件有问题。我需要将选定的属性设置为第一个mat-option控件，而不要绑定到[(ngModel)]或[(value)]上。我的mat-option控件是由*ngFor指令生成的，但我的组件中不需要属性，该属性通常绑定在[(ngModel)] UI控件的mat-select上。所以，我尝试了这个：

<mat-form-field>
    <mat-label>Currency</mat-label>
    <mat-select #currencySelect>
        <mat-option *ngFor="let currency of currencies; let isFirst = first" [value]="currency" [attr.selected]="isFirst ? 'selected' : null">
            {{currency | currencyName}}
        </mat-option>
    </mat-select>
</mat-form-field>

这：

<mat-form-field>
    <mat-label>Currency</mat-label>
    <mat-select #currencySelect>
        <div *ngFor="let currency of currencies; let isFirst = first">
            <mat-option *ngIf="isFirst" selected [value]="currency">
                {{currency | currencyName}}
            </mat-option>
            <mat-option *ngIf="!isFirst" [value]="currency">
                    {{currency | currencyName}}
            </mat-option>
        </div>
    </mat-select>
</mat-form-field>

只有这给了我想要的效果：

<mat-form-field>
    <mat-label>Currency</mat-label>
    <mat-select #currencySelect [value]="currencies != null && currencies.length != 0 ? currencies[0] : null">
        <mat-option *ngFor="let currency of currencies;" [value]="currency">
            {{currency | currencyName}}
        </mat-option>
    </mat-select>
</mat-form-field>

但是这里我不使用选定的attrubute。我在[value]上使用了绑定，我不太喜欢。

我希望代码如下：

<mat-form-field>
    <mat-label>Currency</mat-label>
    <mat-select #currencySelect>
        <mat-option *ngFor="let currency of currencies; let isFirst = first" [value]="currency" [selected]="isFirst">
            {{currency | currencyName}}
        </mat-option>
    </mat-select>
</mat-form-field>

我该怎么做？再一次，我不需要在组件中标识所选项目的属性。这很重要。

Answer 1

垫选择不能直接与对象一起使用，您可以在垫选择上使用compareWith输入，如下所示：

<mat-select [compareWith]="compareFn" [value]="initialValue"></mat-select>

在您的Ts文件中，添加以下示例：

initialValue= {currencyID: 1, currencyName: 'USD'};
compareFn(a, b) {
  return a.currencyID == b.currencyID;
}

如何为垫选项设置所选属性？

1 个答案: