Question

这是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
     }

如何在页面加载时默认隐藏div，并在角度2

1 个答案: