2017-04-26 4 views
2

Ich baue eine Angular2 App und versuchen, um loszuwerden, ein Div auf Klick *ngIfKann nicht Eigenschaft ‚Wert‘ von undefined in Angular2 Typoskript

Hier ist meine Ansicht lesen:

<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> 

Hier ist mein Controller :

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); 
    } 

} 

Was ich will, ist mein .releasesMenu Block auf (click)="onSelect(release) entfernen/auszublenden. Aber ich bin immer die Fehlermeldung: Kann nicht lesen Eigenschaft ‚Wert‘ undefined

Antwort

3

Das ist, weil #search innerhalb eines ist *ngIf

diese in Ihre Komponenten Klasse

@ViewChild('search')search:ElementRef; 

und ändern *ngFor zu

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

Siehe auch Angular2, *ngIf and local template variables

Verwandte Themen