md-list-item中的md-radio-button

时间:2016-11-08 14:13:47

标签: javascript angular angular-material2

我尝试解决此问题:

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

我想点击我的md项目行的任意位置,它应该触发单选按钮的操作。

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的事件工作正常,但我不明白为什么我没有在单选按钮上默认选择lang?

为什么ngModel不会初始化默认设置的当前lang? 有什么想法吗?

1 个答案:

答案 0 :(得分:0)

没关系,我找到了解决方案:

      <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>