Как написать пользовательский атрибут данных для элемента mat-select в Angular Материал 9 - PullRequest
Новая
       34

Как написать пользовательский атрибут данных для элемента mat-select в Angular Материал 9

0 голосов
/ 20 февраля 2020

Я пытаюсь установить пользовательский атрибут данных (data-tag) для элемента mat-select в Angular Материал 9. Ниже приведен код 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">

но ничего ...

Ответы [ 2 ]

0 голосов
/ 22 февраля 2020

Наконец решено :

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] в mat-select равно this.subjectControl.value, и установите [value] из mat-option равным значению, которое нужно сохранить в [attr.data-tag].

0 голосов
/ 22 февраля 2020

Ваш код выглядит правильно для меня. Я попытался добавить его в существующий пример stackblitz, и он появился в HTML. Может быть, это поможет разобраться:

https://stackblitz.com/edit/angular-material-select-compare-with?embed=1&file=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">
...