如何为'垫子选择'Angular Material 9中的元素

Question

我正在尝试为Angular Material 9中的mat-select元素设置自定义数据属性(data-tag(。以下是我正在使用的HTML和TS代码，但在浏览器中检查网页代码不会发生任何事情：

HTML:

<mat-form-field>
<mat-label>Course</mat-label>
<mat-select [formControl]="subjectControl" required>
<mat-option>-- None --</mat-option>
<mat-optgroup *ngFor="let course of subjects" [label]="course.semester" [disabled]="course.disabled">
<mat-option *ngFor="let subject of course.courses" [value]="subject.subjectName" [attr.data-tag]="subject.subjectSemester">
{{ subject.subjectName }}
</mat-option>
</mat-optgroup>
</mat-select>
</mat-form-field>

TS:

export interface SubjectGroup {
disabled?: boolean;
semester: string;
courses: Subject[];
}
export interface Subject {
subjectName: string;
subjectSemester: string;
}
export class FormComponent implements OnInit {
subjectControl = new FormControl("", Validators.required);
subjects: SubjectGroup[] = [
{
semester: "Semester 1",
courses: [
{
subjectName: "Course 1",
subjectSemester: "1° Semester"
},
{
subjectName: "Course 2",
subjectSemester: "1° Semester"
},
{
subjectName: "Course 3",
subjectSemester: "1° Semester"
},
{
subjectName: "Course 4",
subjectSemester: "1° Semester"
},
{
subjectName: "Course 5",
subjectSemester: "1° Semester"
}
]
},
{
semester: "Semester 2",
courses: [
{
subjectName: "Course 1",
subjectSemester: "2° Semester"
},
{
subjectName: "Course 2",
subjectSemester: "2° Semester"
},
{
subjectName: "Course 3",
subjectSemester: "2° Semester"
},
{
subjectName: "Course 4",
subjectSemester: "2° Semester"
}
]
}
];
}

我发现了这个问题，但我不明白我做错了什么。谢谢

#编辑1:

我也试过：

<mat-option *ngFor="let subject of course.courses" [value]="subject.subjectName" [attr.data-tag]="subject ? subject.subjectSemester : null">

但什么都没有。。。

Answer 1

最终解决：

HTML:

<mat-form-field>
<mat-label>Course</mat-label>
<mat-select
[formControl]="subjectControl"
[attr.data-tag]="this.subjectControl.value"
required
>
<mat-option>-- None --</mat-option>
<mat-optgroup *ngFor="let course of subjects" [label]="course.semester" [disabled]="course.disabled">
<mat-option *ngFor="let subject of course.courses" [value]="subject.subjectName"><!--here I have to set [value] to `.subjectName` or `.subjectSemester` to show it into the `data-tag`-->
{{ subject.subjectName }}
</mat-option>
</mat-optgroup>
</mat-select>
</mat-form-field>

正如代码注释中所写，我必须将[attr.data-tag]放入等于this.subjectControl.value的mat-select中，并将mat-option的[value]设置为等于要存储到[attr.data-tag]中的值。

Answer 2

您的代码在我看来是正确的。我尝试将它添加到现有的stackblitz示例中，它显示在HTML中。也许这将有助于弄清楚：

https://stackblitz.com/edit/angular-material-select-compare-with?embed=1&file=app/app.html

<mat-option class="mat-option ng-star-inserted" data-tag="Three" role="option" ng-reflect-value="[object Object]" tabindex="0" id="mat-option-29" aria-selected="false" aria-disabled="false">