Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

268
Visualizações
Cannot read property 'value' of undefined in Angular2 Typescript

I am building an Angular2 app and trying to get rid of a div on click through *ngIf

Here's my view:

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

Here's my 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);
  }

}

What I want is to remove / hide my .releasesMenu block on (click)="onSelect(release). But I am getting the error: Cannot read property 'value' of undefined

over 4 years ago · Santiago Trujillo
1 Respostas
Responde à pergunta

0

That's because #search is inside an *ngIf

Add this to your components class

@ViewChild('search')search:ElementRef;

and change *ngFor to

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

See also Angular2, *ngIf and local template variables

over 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda