angular2

Question

エラーでそれが関連のコンポーネントにHTML（ビュー）からフォームデータを渡すことができません：私は、私は2つを持っています「化学」と呼ばれるオブジェクトを作成する必要があるから、このHTMLファイルを持っている

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

をプロパティ：テキスト入力からの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> 

後、私はに渡したいです関数がコンポーネントの最後に定義されています。

これは、関連するコンポーネントです：

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エラーです。あなたのテンプレートからオブジェクトchemicalのsearchForプロパティにアクセスしようとしています。しかし、chemicalオブジェクトは、テンプレートがそのプロパティに最初にアクセスしようとすると、定義されていないため、エラーが発生しています。これを解決するには空のオブジェクトまたはデフォルトのオブジェクトを '化学物質'に割り当てるだけです。例：

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

また、上記のものは、TypeScriptのベストプラクティスです。

@Input() chemical: any = {}