Селективная кнопка по умолчанию выберите значение угловой материал 2

Многие плункеры больше не работают на меня. Здесь есть модифицированный stackblitz:

Blitz

Как уже упоминалось, мы можем установить ngModel и переменную:

[(ngModel)]="favoriteSeason"

и в файле 'ts':

  favoriteSeason: string = 'Winter';

Или мы можем установить отмеченный:

[checked]="season === 'Winter'" 

Еще одна небольшая проблема, которую я недавно обнаружил, заключается в том, что если вы по ошибке укажете неправильный mat-checkbox (повторяющиеся идентификаторы), то это не сработает - вы ничего не сможете проверить. Убедитесь, что ваши идентификаторы уникальны.

Вы можете использовать checked, например:

[checked]="data.value ==='false'" 

обратите внимание, что мы проверяем, используя строку 'false' вместо false, поскольку ваше значение имеет строку со значением false.

Plunker

Вы можете добиться этого с помощью атрибута [checked]. См. Этот Plunker

есть еще один вариант: вы можете использовать [(ngModel)] для инициализации md-radio-group с вашим компонентом.

plunker демо.

Мне нравится реактивный подход при работе с переключателями материалов. Ниже приведен пример того, как проверить истинность и ложь в вашей базе данных для определенной формыControlName.

Компонент в диалоговом окне

<mat-radio-group formControlName="trueClient">
                <mat-radio-button class="material-radio" value="true" [checked]="data.trueClient === 'true'">True Client</mat-radio-button>
                <mat-radio-button class="material-radio" value="false" [checked]="data.lostLead === 'false'">Lost Lead</mat-radio-button>
        </mat-radio-group>

Если это форма обновления, не забудьте установить значения в своем конструкторе форм. Пример ниже:

.ts-файл для компонента в диалоговом окне.

this.viewClient.setValue({
      trueClient: this.data.trueClient
    });

В этом случае я открываю данные в диалоговом окне. Итак, данные поступают из следующего: component.ts до открытия диалогового окна. Просто ссылка, чтобы вы знали, откуда я взял переменную данных сверху, чтобы установить значения.

Компонент, используемый для открытия диалогового окна. Ссылка на Dialog в документации по материалам для получения дополнительной информации о том, как настроить.

const dialogRef = this.dialog.open(ClientNotesComponent, {
        height: '600px',
        width: '800px',
        data: {trueClient: trueClient}
    });
 });
}

HTML файл

<mat-radio-group aria-label="Select an option" [(ngModel)]="formValues['type']">
    <mat-radio-button value="individual">Individual</mat-radio-button>
    <mat-radio-button value="business">Business</mat-radio-button>
</mat-radio-group>

Ts файл

ngOnInit()
{
    this.formValues['type'] = "business";
}

В моем случае проблема выбора была решена заменой атрибута name="howLong" на [ngModelOptions]="{standalone: true}".
Следует отметить, что выбор работал для A day or less than a day. Но это не сработало для More than a day

Нерабочая версия:

   <mat-radio-group
        [(ngModel)]="howLong"
        name="howLong"
        (change)="resetTime()">
        <mat-radio-button class="ignore" value="MoreThanADay">
            More than a day
        </mat-radio-button>
        <mat-radio-button value="ADayOrLessThanADay">A day or less than a day</mat-radio-button>
    </mat-radio-group>

Рабочая версия:

   <mat-radio-group
        [(ngModel)]="howLong"
        [ngModelOptions]="{standalone: true}"
        (change)="resetTime()">
        <mat-radio-button class="ignore" value="MoreThanADay">
            More than a day
        </mat-radio-button>
        <mat-radio-button value="ADayOrLessThanADay">A day or less than a day</mat-radio-button>
    </mat-radio-group>

если вы хотите передать строку или логическое значение вашей группе mat-radio-group с помощью [(ngModel)], вы можете установить значение по умолчанию для вашего [(ngModel)] в файле TS. вот так: HTML-файл

Ts файл