如何为我的 mat-option 设置 selected 属性？

Question

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

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

但在这里我不使用选定的属性。我在[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

Mat select 不能直接与对象一起使用，您可以像这样在 mat-select 上使用 compareWith 输入：

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

在你的 Ts 文件中，添加这些例如：

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