當在角2

Question

該所選網頁加載與一個單選按鈕如何隱藏默認一個div是angular組分：
如何設置功能部件通過默認加載​​頁面時隱藏div。 div只有點擊radio-button才能加載。

`import { Component, OnInit } from '@angular/core'; 

@Component({ 

    templateUrl: './radio-test.component.html', 
    styleUrls: ['./radio-test.component.css'] 
}) 

export class RadioTestComponent { 
    private selectedLink: string="Radio1";   
    setradio(e: string): void 
    { 
    this.selectedLink = e;   
    } 
    isSelected(name: string): boolean 
    { 
     if (!this.selectedLink) { 
     return false; 
    }  return (this.selectedLink === name); 
    } 


} 

` 

在Html：
如何調用從組件功能，以便在默認情況下沒有div應顯示。

<div class="jumbotron"> 
<div class="radio"> 
      <label> 
       <input type="radio" name="gender" value="Radio" (click)="setradio('Radio1')" > 
       Radio 1 
      </label> 
     </div> 
     <div class="radio"> 
      <label> 
       <input type="radio" name="gender" value="Female" (click)="setradio('Radio2')" ngModel> 
       Radio 2 
      </label> 
     </div> 


<div *ngIf="isSelected('Radio1')" > 
    <div style="height:52px;width:300px;background-color: grey;">Radio button 1 is selected </div> 
    </div> 

    <div *ngIf="isSelected('Radio2')"> 
    <div style="height:52px;width:300px;background-color: lightgrey;">Radio button 2 is selected </div> 
    </div> 

</div> 

Answer 1

app.html

<div class="jumbotron"> 
    <div class="radio"> 
    <label> 
     <input type="radio" [(ngModel)]="model.btn" name="btn" value="btn1" 
[checked]="model.btn == btn1" > Radio 1 
    </label> 
    </div> 
    <div class="radio"> 
    <label> 
     <input type="radio" [(ngModel)]="model.btn" name="btn" value="btn2" 
[checked]="model.btn == btn2"> 
      Radio 2 
    </label> 
    </div> 


<div *ngIf="model.btn=='btn1'" > 
    <div style="height:52px;width:300px;background-color: grey;">Radio button 1 
     is selected </div> 
    </div> 
    <div *ngIf="model.btn=='btn2'"> 
    <div style="height:52px;width:300px;background-color: lightgrey;">Radio 
    button 2 is selected </div> 
    </div> 
</div> 

app.ts

import { Component, OnInit } from '@angular/core'; 
    @Component({ 
    templateUrl: './radio-test.component.html', 
    styleUrls: ['./radio-test.component.css'] 
    }) 

export class RadioTestComponent { 
model:any; 
constructor(){ 
     this.model=new Button(); 
     this.model.btn ='btn1'; 
    } 
    } 

class Button { 
    btn: string 
    }