мкр-радио-кнопки в мкр-элемента списка

Question

Я пытаюсь решить эту проблему:

https://github.com/angular/material2/issues/1518

Я хотел бы, чтобы щелкнуть в любом месте на линии моего мд-пункта, и это должно спровоцировать действие переключателя.

---

settings.component.html:

<md-radio-group [(ngModel)]="lang"> 
    <md-list-item (click)="changeLanguageTo(l)" *ngFor="let l of langOptions"> 
    <md-radio-button [value]="l"> 
     {{l}} 
    </md-radio-button> 
    </md-list-item> 
</md-radio-group> 
<p>Your have selected : {{lang}}</p> 

---

settings.component.ts:

private langOptions = [ 
    'fr', 
    'en' 
]; 
private lang: string = 'en'; 
changeLanguageTo(lang) { 
    this.lang = lang || this.lang; 
    console.log(this.lang); 
    this.translate.use(this.lang); 
} 

По умолчанию в моем файле app.components.ts, мой текущий lang, который выбран, является английским.

На самом деле, событие для изменения lang отлично работает, но я не понял, почему у меня нет переключателя по умолчанию на переключателе?

Почему ngModel не инициализирует текущий язык, который установлен по умолчанию? Любые идеи?

Answer 1

Nevermind, я основал решение:

 <md-radio-group [(ngModel)]="lang"> 
     <md-list-item (click)="changeLanguageTo(l)" *ngFor="let l of langOptions"> 
      <md-radio-button [value]="l" [checked]="lang == l"> 
      {{l}} 
      </md-radio-button> 
     </md-list-item> 
     </md-radio-group> 

     <p>Your have selected : {{lang}}</p>