无法将表单数据从html（视图）传递到角色2中的关联组件 [英] Not able to pass form data from html(view) to it's associated component in angular2

问题描述

错误：

EXCEPTION：未捕获（承诺）：错误：app / search / search.component.html中的错误：10 35引起的：无法读取属性'searchFor'未定义

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（来自下拉菜单）如下所示：

I have this html file from which I need to create a object called 'chemical' which will have two properties: 1)searchFor (coming from text input) 2) searchBy (coming from dropdown menu) as shown below:

<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）函数。

After the chemical object is created, I want to pass it to getChemicalEntries(chemical) function defined on the component end.

这是相关联的组件：

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的经验。

PS: I am new to Angular2. Have experience with Angular 1.4.

推荐答案

这实际上是一个简单的JavaScript错误。您正在尝试从模板访问 searchFor 属性 chemical 对象。但是，当模板首先尝试访问其属性时，化学对象未定义，这就是您收到错误的原因。为了解决这个问题，您只需要为化学分配一个空的或默认的对象。例如：

This is actually a simple JavaScript error. You are trying to access searchFor property of chemical object from your template. But the chemical object is undefined when the template first try to access its property and that's why you are getting the error. To solve this you just need to assign an empty or default object to 'chemical'. For example:

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

波纹管也可以正常工作，但上面一个是TypeScript的最佳实践。

The bellow will also work fine but the above one is best practice for TypeScript.

@Input() chemical: any = {}

这篇关于无法将表单数据从html（视图）传递到角色2中的关联组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！