2017-04-26 51 views
2

我建立一個Angular2應用程序,並試圖通過*ngIf無法讀取的未定義的屬性「值」在Angular2打字稿

這裏擺脫上點擊一個div的是我的觀點:

<router-outlet> 

<div class="releasesMenu" *ngIf="detailedInfo"> 
    <h1>Releases</h1> 
    <div class="search"> 
    <input type="text" #search (keyup)="0" placeholder="Find release by its name, song or year"> 
    </div> 
</div> 

<div class="releasesOutlet container"> 
     <div class="row releasesBlock"> 
      <div *ngFor="let release of (releases| searchFilter: search.value)" class="releaseRender" (click)="onSelect(release)"> 
       <div class="releaseRenderWrap" *ngIf="!selectedRelease"> 
      <span>Something interesting...</span> 
      </div> 
     </div> 

     <div class="releaseDetails" *ngIf="selectedRelease"> 
      <div class="releaseDetailsWrap"> 
       <span>Some details...</span> 
      </div> 
     </div> 
     </div> 
    </div> 
</router-outlet> 

這裏是我的控制器:

import { Component, OnInit } from '@angular/core'; 
import { SearchFilter } from './../search-filter.pipe'; 
import { ReleasesService } from '../releases/releases.service'; 

@Component({ 
    selector: 'releases-component', 
    providers: [ReleasesService], 
    templateUrl: './app/releases/releases.component.html', 
    styleUrls: ['./app/releases/releases.component.css','./css/grid.css'] 
}) 

export class ReleasesComponent implements OnInit { 
    releases: any = []; 
    release: any; 
    selectedRelease: any; 
    private detailedInfo: boolean; 

    onSelect(release){ 
    this.detailedInfo = false; 
    this.selectedRelease = release; 
    console.log(release) 
    } 

    constructor(private releasesService: ReleasesService){ } 

    ngOnInit(){ 
    this.releasesService.getReleases() 
    .subscribe(data => this.releases = data); 
    } 

} 

我要的是刪除/隱藏(click)="onSelect(release).releasesMenu塊。但我得到的錯誤: 無法讀取的不確定

回答

3

這是因爲#search是內部的*ngIf

添加到您的組件類

@ViewChild('search')search:ElementRef; 

,改變*ngFor財產「價值」

*ngFor="let release of (releases| searchFilter: search?.nativeElement?.value)" 

請參閱也Angular2, *ngIf and local template variables

相關問題