не в состоянии передать данные формы из HTML (вид) к ней ассоциируется компонент в angular2

Question

Ошибки:

EXCEPTION: Uncaught (in promise): Error: Error in app/search/search.component.html:10:35 caused by: Cannot read property 'searchFor' of undefined

У меня есть этот HTML файл, из которого мне нужно создать объект под названием «химическая», который будет иметь два свойства: 1) SearchFor (исходя из ввода текста) 2) searchBy (исходя из выпадающего меню), как показано ниже:

<div class="container"> 
<div class="row"> 
    <div class="col-sm-12 bevisible"> 
     <h3>Search for chemical entries</h3> 
    </div> 
</div> 
<form> 
    <div class="form-group row"> 
     <label for="searchFor" class="col-sm-2 col-form-label">Search For</label> 
     <div class="col-sm-10"> 
      <input type="text" [(ngModel)]="chemical.searchFor" 
        name="searchbox" 
        class="form-control" id="searchFor" 
        placeholder="Search an Entry..."> 
     </div> 
    </div> 
    <div class="form-group row"> 
     <label for="searchType" class="col-sm-2 col-form-label">Search by</label> 
     <div class="col-sm-10"> 
      <select class="custom-select" id="searchType" [(ngModel)]="chemical.searchBy" name="searchdropdown"> 
       <option selected>Search type</option> 
       <option value="1">Reagent Barcode</option> 
       <option value="2">Catalog#</option> 
       <option value="3">Bottle Label</option> 
       <option value="3">Location Barcode</option> 
      </select> 
     </div> 
    </div> 
    <div class="form-group row"> 
     <div class="offset-sm-2 col-sm-10"> 
      <button type="submit" (click)="getChemicalEntries(chemical)" class="btn btn-primary">Submit</button> 
     </div> 
    </div> 
</form> 

После того, как химический объект создается, я хочу передать его getChemicalEntries(chemical), определенная на конце компонента.

Это связано компонент:

import {Component, Input} from '@angular/core'; 
import {SearchService} from '../services/searchservice.component'; 
import {Chemical} from "../chemical"; 

@Component({ 
    selector: 'bioshoppe-search', 
    providers:[SearchService], 
    templateUrl: 'app/search/search.component.html', 
    styleUrls: ['../../css/search.component.css', '../../css/style.css'] 
}) 

export class SearchComponent { 
    @Input() chemical : Chemical; 
    public chemicals; 
    public error; 

    constructor(private searchService: SearchService) { 
    }; 

    // ngOnInit() { 
    //  this.getChemicals(); 
    // } 

    getChemicals() { 
     this.searchService 
      .getChemicalEntries() 
      .subscribe(
       // the first argument is a function which runs on success 
       data => { 
        this.chemicals = data 
       }, 
       // the second argument is a function which runs on error 
       err => { 
        console.error(err), this.error = true 
       }, 
       // the third argument is a function which runs on completion 
       () => console.log("done loading chemicals") 
      ); 
    } 
} 

PS: Я новичок в Angular2. У вас есть опыт работы с Angular 1.4.

Answer 1

Это на самом деле простая ошибка JavaScript. Вы пытаетесь получить доступ к объекту searchFor объекта chemical из вашего шаблона. Но объект chemical не определен, когда шаблон сначала пытается получить доступ к его свойству, и именно поэтому вы получаете ошибку. Чтобы решить эту проблему, вам просто нужно назначить пустой или по умолчанию объект «химический». Например:

@Input() chemical: Chemical = { 
    searchFor: '', 
    searchBy: '' 
}; 

Плоскость также будет работать нормально, но вышеприведенная практика является лучшей практикой для TypeScript.

@Input() chemical: any = {}