1

私は2つのラジオボタンを持っています。最初に選択してからボタンをクリックすると表示がfalseになり、2番目に選択してボタンをクリックすると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;
        }
    }
4

1 に答える 1

0

これは実用的な例です:

//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;
        }
    }
}
于 2016-06-30T16:04:07.937 に答える