Select 如何为'；垫选择'；角材料中的元素9
我正在尝试为Angular Material 9中的Select 如何为'；垫选择'；角材料中的元素9,select,multidimensional-array,angular-material,custom-data-attribute,angular-ngfor,Select,Multidimensional Array,Angular Material,Custom Data Attribute,Angular Ngfor,我正在尝试为Angular Material 9中的mat select元素设置自定义数据属性（data tag）。下面是我正在使用的HTML和TS代码，但在浏览器中检查网页代码时没有任何效果： HTML: <mat-form-field> <mat-label>Course</mat-label> <mat-select [formControl]="subjectControl" required>
mat selectdata tagHTMLTS<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>
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"
}
]
}
];
}
<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>
<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>
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"
}
]
}
];
}
<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>
<mat-option *ngFor="let subject of course.courses" [value]="subject.subjectName" [attr.data-tag]="subject ? subject.subjectSemester : null">
但是什么都没有…我觉得你的代码很正确。我尝试将其添加到现有的stackblitz示例中，它显示在HTML中。也许这将有助于解决这个问题：
最终解决了： 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>
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"
}
]
}
];
}
<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>
课程
--没有--
{{subject.subjectName}
如代码注释中所述，我必须将
[attr.data tag]mat，选择等于this.subjectControl.value的[value]
，并将mat选项的[value]
设置为等于要存储到[attr.data tag]
中的值，非常感谢您的回答和时间回复。我是新手。我试图访问运行代码的链接，但是，很抱歉，可能是我做错了什么，因为我在网页的源代码中没有看到数据标记
属性。。。我意识到有一个屏幕显示了我所做的事情：@RiccardoVolpe你的屏幕截图不是公开的。您是否希望数据标记
位于mat select元素上。当你打开菜单时，它在mat选项元素上。Hello@MattNienow，试试这个：。。。我会将所选选项存储到数据标记中。其目的是通过对数据标记属性的内容应用后处理，基于输入表单值生成自动标记。。。也就是说，循环到表单中以获取所有数据标记属性（基于输入值），在这些属性上应用后处理以生成标记