Как исправить в Angular2 Cannot read property 'value' of undefined?

Question

[Alexander Belov]

Не могу понять, где ошибка.
Есть компонент с таким кодом:

<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) убирать блок с классом class="releasesMenu".

Через *ngIf="detailedInfo" пробую, но постоянно получаю ошибки, типа Cannot read property 'value' of undefined.
В чём проблема и как избавиться от этой ошибки - не могу понять, прошу помочь, кто шарит.

Answer 1

[Руслан Лопатин]

У вас ошибка в другом выражении. А именно в

search.value

. Нет переменной search в области видимости

Comments

[Alexander Belov]

А как её добавить в область видимости? Пишу private search: any; в контроллере, но та же ошибка.

[Руслан Лопатин]

Зачем? Что это такое вообще? Что вы пытаетесь сделать?

[Alexander Belov]

Руслан Лопатин: search - это фильтр поиска на сайте, мне нужно чтобы при клике на (click)="onSelect(release), убирался блок class="releasesMenu", в котором также находится input с search внутри него.

[Naim]

Alexander Belov: а нельзя вместо #search, --> [(ngModel)]="search", а потом предать переименую search?

Answer 2

[ozknemoy]

самое просто сделать search не обязательным в разметке
*ngFor="let release of (releases| searchFilter: search?.value )