Question

我有两个单选按钮当我选择第一个然后我单击按钮然后显示应该为假，当我选择第二个并单击按钮时，displayConflict应为true，如下所示

我试过这种方式，但我无法得到解决方案。

 <input #m [checked]="model.Gender == m.value" (click)="model.Gender = m.value" name="Gender" value="male" type="radio">
<input #f [checked]="model.Gender == f.value" (click)="model.Gender = f.value" name="Gender" value="female" type="radio">


<p-button (click)="showExist(model.Gender);" pButton type="button" label="Accept"></p-button>

private display: boolean = false;
public displayConflict: boolean = false;
public showExist(str: String): void {
        if (str === "male") {
            this.display = false;
        } else {
            this.displayConflict = true;
        }
    }

Answer 1

这是一个有效的例子：

//our root app component
import {Component} from '@angular/core'

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2>Hello {{name}}</h2>

    <label>Male</label>
      <input #m [checked]="model.Gender == m.value" (click)="model.Gender = m.value" name="Gender" value="male" type="radio" />
      <label>Female</label>
<input #f [checked]="model.Gender == f.value" (click)="model.Gender = f.value" name="Gender" value="female" type="radio" />
<br/>
<button (click)="showExist(model.Gender);" pButton type="button" label="Accept">
Next</button>

<div *ngIf="!display || displayConflict"> Hide me, by selecting and hitting Next</div>

    </div>
  `,
  directives: []
})
export class App {
  constructor() {
    this.name = 'Angular2 (Release Candidate!)'
  }

  model:any={"Gender": "female" }
  private display: boolean = false;
public displayConflict: boolean = false;
public showExist(str: String): void {
        if (str === "male") {
            this.display = false;
            this.displayConflict = true;
        } else {
          this.display = true;
            this.displayConflict = false;
        }
    }
}

如何在Angular 2中调用条件单选按钮？

1 个答案: