单选按钮在Angular 2中无法正常工作

我们有一个angular2组件，我们拥有某些单选按钮。我在某些条件下检查单选按钮。单选按钮在Angular 2中无法正常工作

单选按钮的HTML代码去为：

<span class="radio-switch-group"> 
 
    <label> 
 
\t <input type="radio" name="radioView" id="All" (click)="onBtnClick('All')" [checked]="currentTab === 'All'"> 
 
\t <span class="radio-label">ALL Cars</span> 
 
    </label> 
 
    <label> 
 
     <input type="radio" name="radioView" id="Honda" (click)="onBtnClick('Honda')" [checked]="currentTab === 'Honda'"> 
 
     <span class="radio-label">Honda</span> 
 
    </label> 
 
</span>

TS文件如下：

 export class CarComponent implements OnInit{ 
     @Input() public currentTab: string = 'All'; 

     public onBtnClick(carType: string){ 
      this.currentTab = carType; 
     } 

     public ngOnInit() { 
      this.currentTab = 'All'; 
     } 
    }

当我在标签视图实例化此组件从另一个组件单选按钮不检查即使当currentTab设置为 '全部'

来源

2017-05-08 hannah

这个代码是为我工作得很好，请其他地方的复选框值清零 – sainu

我在实例化一个标签这个组件检查你的代码，它不在这种情况下工作。 – hannah

相反@input的（），声明就像下面的变量：

export class CarComponent implements OnInit{ 
    public currentTab: string = 'All'; 

    public onBtnClick(carType: string){ 
     this.currentTab = carType; 
    } 

    public ngOnInit() { 
     this.currentTab = 'All'; 
    } 
}

@input负责一个方式angular2结合。

希望它有帮助！

来源

2017-05-08 11:47:45

试过了，它没有工作。 :( – hannah

'@ Input'也是双向的 - 它取决于父元素如何使用它。 – Cody

尝试使用[value]属性绑定的输入。在Angular中使用[selected]或[checked]的IIRC基本上在做以下工作。

if ([checked]===[value])

<span class="radio-switch-group"> 
 
    <label> 
 
\t <input type="radio" name="radioView" id="All" (click)="onBtnClick('All')" [value]="'All'" [checked]="currentTab"> 
 
\t <span class="radio-label">ALL Cars</span> 
 
    </label> 
 
    <label> 
 
     <input type="radio" name="radioView" id="Honda" (click)="onBtnClick('Honda')" [value]="'Honda'"[checked]="currentTab"> 
 
     <span class="radio-label">Honda</span> 
 
    </label> 
 
</span>

来源

2017-05-08 16:01:13

单选按钮在Angular 2中无法正常工作

回答

相关问题