* 여러 조건이 작동하지 않는 ngIf

-3

'전체'라디오 버튼을 클릭하면 전체 표를 표시하려고합니다. 남성 라디오 버튼을 클릭하면 '남성'만 포함 된 행을 표시하려고합니다. 여성 라디오 버튼을 클릭하면 '여성'만 포함 된 행을 표시하려고합니다. 그것이 보여주는 것은 모두 빈 페이지입니다. 내 코드 :* 여러 조건이 작동하지 않는 ngIf

<form> 
    <input type="radio" name="r" [(ngModel)] = "chk1"> All 
    <input type="radio" name="r" [(ngModel)] = "chk2"> male 
    <input type="radio" name="r" [(ngModel)] = "chk3"> female 
</form> 

<table> 
    <tr> 
     <th>Name</th> 
     <th>Gender</th> 
    </tr> 
    <tr *ngIf = "(chk1 || chk2"> 
     <td>abc</td> 
     <td>male</td> 
    </tr> 
    <tr *ngIf = "chk1 || chk3"> 
     <td>xyz</td> 
     <td>female</td> 
    </tr> 
</table>

출처

2017-11-04 Boidurja Talukdar

첫 번째 * ng에는 구문 오류가 있습니다. '(' –

콘솔에 메시지가 있다고 상상해보십시오.이 메시지를 읽는 것이 좋습니다. – jonrsharpe

[How to use \ * ng 다른 방법은 Angular 4?] (https://stackoverflow.com/questions/43006550/how-to-use-ng-else-in-angular-4) – Aravind

라디오 버튼을 사용하는 방식이 아닙니다. 모든 입력은 같은 변수에 바인딩하지만 다른 값이되어야한다

<form> 
    <label><input type="radio" name="o" value="all" [(ngModel)]="option" /> All</label> 
    <label><input type="radio" name="o" value="male" [(ngModel)]="option" /> Male</label> 
    <label><input type="radio" name="o" value="female" [(ngModel)]="option" /> Female</label> 
    </form> 

    Chosen option: {{ option }}

이 방법, 당신이 이런 식으로 일을하는 것이

*ngIf="option === 'male' || option === 'all'"

또는

*ngIf="option === 'female' || option === 'all'"

주를 사용할 수 있습니다 꽤 비효율적이다. 옵션이 변경 될 때마다 컨트롤러에서 ((ngModelChange)="createFilteredCopy()"으로) 필터링 된 복사본 복사본을 만든 다음 ngIf를 사용하지 않고 필터링 된 복사본을 반복하는 것이 좋습니다.

출처

2017-11-04 10:24:33

* 여러 조건이 작동하지 않는 ngIf

답변

관련 문제