时间戳

首页 > 解决方案 > 如何在 Angular Material 9 中为“mat-select”元素编写自定义数据属性

select - 如何在 Angular Material 9 中为“mat-select”元素编写自定义数据属性

问题描述

我正在尝试为Angular Material 9data-tag中的元素设置自定义数据属性 () mat-select。以下是我正在使用的代码，但是通过将网页代码检查到浏览器中没有任何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">

但没有...

标签： selectmultidimensional-arrayangular-materialcustom-data-attributeangular-ngfor

解决方案

终于解决了：

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]equal mat-selecttothis.subjectControl.value和 set [value]of mat-optionequal 中要存储的值[attr.data-tag]。

推荐阅读