Question

Child.html

   <div>
     <md-select id="vendorVariable" class="vm-
        select-wrap" 
        (ngModelChange)="vendorUpdate($event)"
        [(ngModel)]="selectedVendor" 
        placeholder="AWS" 
        name="vendorVariable">
      <md-option  *ngFor="let vendor of vendors" 
         [value]="vendor.small">
         {{vendor.caps}}
      </md-option>
     </md-select>
    </div>

Child.ts

  vendors: any = [
     {caps: "AWS", small: "aws"},
     {caps: "AZURE", small: "azure"}
  ];

  @Output() selectedCloudEnv = new 
  EventEmitter();
  --------
  function
  --------
  vendorUpdate(value){
  console.log(value);
  this.selectedCloudEnv.emit(value);    

  }

Parent.html

<div class="bundle-tab-container pad-rlt" 
 *ngIf="!azureSelected">
   <child 
  (selectedCloudEnv)="selectedCloudEnv($event)">
   </child>
</div>
<div class="bundle-tab-container pad-rlt" 
  *ngIf="azureSelected">
  <cloud-azure></cloud-azure>
</div>

parent.ts

 azureSelected: Boolean = false;
  selectedCloudEnv(value){
  console.log("inside parent");
  console.log("parent"+value);
  if(value === "azure"){
     this.azureSelected = true;
  }
  else{
     this.azureSelected=false;
  }

我将值从child传递给parent，然后根据后续值，我的目标是隐藏子模板并显示第二个模板＆＃34; cloud-azure＆＃34;使用ngIf = azureSelected（true或false）。我在父级中获取值但ngIf不起作用。

控制台上的错误是

        `Uncaught TypeError: Cannot read property 'elementRef' of undefined
         at MdTabHeader.webpackJsonp.../../../material/tabs/tab-
         header.js.MdTabHeader._alignInkBarToSelectedTab 
         (http://localhost:3000/vendor.bundle.js:137599:64)
         at http://localhost:3000/vendor.bundle.js:137387:23
         at
         ZoneDelegate.webpackJsonp.../../../..
         /zone.js/dist/zone.js.ZoneDelegate.invokeTask 
         (http://localhost:3000/vendor.bundle.js:51598:31)
          at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask 
         (http://localhost:3000/vendor.bundle.js:51397:47)
          at ZoneTask.invoke 
          (http://localhost:3000/vendor.bundle.js:51651:38)
         at data.args.(anonymous function) 
         (http://localhost:3000/vendor.bundle.js:52812:29) `

代码是

                            `<md-tab>
                            <template md-tab-label>
                            VIRTUAL MACHINES
                            </template>
                             <div class="bundle-tab-container pad-rlt" 
                           *ngIf="!azureSelected">
                            <cloud-services 
                            (selectedCloudEnv)="selectedCloudEnv($event)">
                            </cloud-
                            services>
                             </div>
                            <div class="bundle-tab-container pad-rlt" 
                            *ngIf="azureSelected">
                             <cloud-azure></cloud-azure>
                            </div>
                            </md-tab> `

在@Output值上使用ngIf

0 个答案: