角2で表示/非表示にする方法

Question

「secondTab」の値がtrueの場合、以下のように[hidden]を使用しました。

<form #siteForm="ngForm" novalidate (ngSubmit)="saveSite(siteForm.value,siteForm.valid)" class="admin-modal"> 

    <div class="txt-danger">{{errorMessage}}</div><br/> 
    <ul role="tablist" class="nav nav-tabs"> 
    <li [ngClass]="{active:firstTab}"><a (click)="siteDetail()">Site Details</a></li> 
    <li [ngClass]="{active:secondTab}"><a (click)="siteLocation()">Site Location</a></li> 
    </ul> 
    <div [hidden]="secondTab"> 
    <input type="hidden" class="form-control" value="{{site.location}}" name="location" [(ngModel)]="site.location" #location> 
    <input type="hidden" class="form-control" value="{{site.id}}" name="id" [(ngModel)]="site.id" #id> 
    <div class="form-group mb-20" [ngClass]="{'has-error':name.errors && (name.dirty || name.touched || siteForm.submitted)}"> 
     <label class="control-label mb-10">Site Name</label> 
     <input type="text" class="form-control default-rounded" name="name" required [(ngModel)]="site.name" #name> 
     <small [hidden]="name.valid || (name.pristine && !siteForm.submitted)" class="text-danger"> 
     Name is require. 
     </small> 
    </div> 
    <div class="form-group mb-20" [ngClass]="{'has-error':maximumCapacity.errors && (maximumCapacity.dirty || maximumCapacity.touched || siteForm.submitted)}"> 
     <label class="control-label mb-10">Maximum Capacity</label> 
     <input type="text" class="form-control default-rounded" name="maximumCapacity" required [(ngModel)]="site.maximumCapacity" #maximumCapacity pattern="[0-9]+"> 
     <small [hidden]="maximumCapacity.valid || (maximumCapacity.pristine && !siteForm.submitted)" class="text-danger"> 
     Maximum capacity is require (enter only digits) 
     </small> 
    </div>  
    <div class="form-group mb-20"> 
     <label class="control-label mb-10">Site Type</label> 
     <select class="form-control" name="type" [(ngModel)]="site.type" #type> 
     <option>Comercial</option> 
     <option>Residential</option> 
     <option>Industrial</option> 
     <option>Etc</option> 
     </select> 
    </div> 
    <div class="form-group mb-20" [ngClass]="{'has-error':contactNumber.errors && (contactNumber.dirty || contactNumber.touched || siteForm.submitted)}"> 
     <label class="control-label mb-10">Site Contact Number</label> 
     <input type="text" class="form-control default-rounded" name="contactNumber" required [(ngModel)]="site.contactNumber" #contactNumber> 
     <small [hidden]="contactNumber.valid || (contactNumber.pristine && !siteForm.submitted)" class="text-danger"> 
     Site contact number is require 
     </small> 
    </div> 
    </div> 
    <div [hidden]="firstTab"> 
    <div class="form-group mb-20"> 
     <label class="control-label">Address</label> 
     <div class="flex"> 
     <div class="w-79 mr-10 mt-5"> 
      <input type="text" class="form-control default-rounded" name="location" required places-auto-complete (place_changed)="placeChanged($event)" [types]="['geocode']"> 
     </div> 
     <div class="mt-5"> 
      <button type="button" class="btn btn-primary black-background white-text pull-right" (click)="chnageMap()">Lookup</button> 
     </div> 
     </div> 
    </div> 
    <div class="form-group mb-20"> 
     <ng2-map zoom="{{zoom}}" center="{{site.latitude}}, {{site.longitude}}"> 
     <marker *ngFor="let pos of positions" [position]="pos" [icon]="markerImage"></marker> 
     <drawing-manager [drawingMode]="'marker'" [drawingControl]="true" [drawingControlOptions]="{ position: 2, drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle'] }" [circleOptions]="{ fillColor: '#ffff00', fillOpacity: 1, strokeWeight: 5, editable: true, zIndex: 1 }"></drawing-manager> 
     </ng2-map> 
    </div> 
    </div> 

    <button type="submit" class="btn btn-primary black-background white-text pull-right">Save</button> 

私はngForの代わりに使用している場合、私はエラー

ORIGINAL EXCEPTION: self._NgModel_202_5.context is not a function 

の下になった「secondTab」の偽の値を設定した場合は、[隠された]それは正常に動作しますが、私はしませんでした私が2番目のタブにいる場合、フォーム送信時に値を取得します。

formBuilderをフォーム用に使用した場合、正常に動作します。 したがって、ngModelで問題が発生する可能性があります

Answer 1

ここで使用するポイントは何ですか？

#location="ngModel" 

このケースでは、通常、html要素の参照を#variableで使用します。

これにコードを変更してみてください：私は隠されたプロパティを使用しwouldn't勧告として

<div [hidden]="secondTab"> 
    <input type="hidden" class="form-control" value="{{site.location}}" name="location" [(ngModel)]="site.location" #location> 
</div> 

けど* ngIf =「secondTab」