Estoy creando una aplicación Angular2 y tratando de deshacerme de un div al hacer clic en *ngIf
Aquí está mi vista:
<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>Aquí está mi controlador:
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); } } Lo que quiero es eliminar/ocultar mi bloque .releasesMenu en (click)="onSelect(release) . Pero recibo el error: No se puede leer la propiedad 'valor' de undefined
Eso es porque #search está dentro de un *ngIf
Agregue esto a su clase de componentes
@ViewChild('search')search:ElementRef; y cambia *ngFor a
*ngFor="let release of (releases| searchFilter: search?.nativeElement?.value )"Ver también Angular2, *ngIf y variables de plantilla local