使用ngModel进行Angular 2双向数据绑定

时间:2016-06-11 15:16:54

标签: angular

首先,我是Typescript和Angular 2的新手,这似乎是一个明显的答案,但我似乎无法让它工作。我有以下型号

export interface IBrand {
    brandID: number;
    name: string;
    image: string;
}

然后我有组件类

import { Component, OnInit }  from '@angular/core';
import { Router, RouteParams } from '@angular/router-deprecated'
import { bootstrap } from '@angular/platform-browser-dynamic';

import { IBrand } from './brand';
import { BrandService } from './brand.service';

@Component({
    selector: 'data-bind',
    templateUrl: 'app/dashboardApp/brands/brand-list.component.html',
    styleUrls: ['app/dashboardApp/brands/brand-list.component.css']
})

export class BrandListComponent implements OnInit {
    brands: IBrand[];
    errorMessage: string;
    newBrand: IBrand;
    pageTitle: string = 'Brands';

    constructor(private _brandService: BrandService,
        private _router: Router) {
    }

    ngOnInit(): void {
        this._brandService.getBrands()
            .subscribe(
            brands => this.brands = brands,
            error => this.errorMessage = <any>error);
    }    
}

然后我有以下html

<div class="form-group">
    <label for="brandName">Brand:</label>
    <input type="text" class="form-control" placeholder="Name" id="brandName" [(ngModel)]="newBrand.name" />
</div>

我无法让IBrand的属性成功运行,我收到错误

  

platform-b​​rowser.umd.js:962 ORIGINAL EXCEPTION:TypeError:无法读取未定义的属性“name”

但是我可以轻松地将它绑定到像pageTitle这样的东西。任何可以指引我朝着正确方向发展的想法?

5 个答案:

答案 0 :(得分:7)

自从我提出这个问题以来已经有一段时间了,而且它已经开始得到一些观点,所以我会添加我的答案。

首先,我需要将界面更改为并添加构造函数。

export class Brand {
  constructor() {}
  brandID: number;
  name: string;
  image: string;
}

现在我有一个构造函数,我可以使用new运算符来实例化对象。

export class BrandListComponent implements OnInit {
  brands: Brand[];
  errorMessage: string;
  newBrand: Brand = new Brand();
  pageTitle: string = 'Brands';

  (...)
}

现在我在没有任何数据的情况下初始化了所需的品牌,我可以将其绑定到模型。希望这会有所帮助。

答案 1 :(得分:1)

我认为您需要初始化newBrand属性,如下所述:

export class BrandListComponent implements OnInit {
  brands: IBrand[];
  errorMessage: string;
  newBrand: IBrand = {}; // <-----
  pageTitle: string = 'Brands';

  (...)
}

在您的情况下,此属性永远不会被初始化,并且您有错误:

  

无法读取未定义的属性“名称”

答案 2 :(得分:1)

如果您不想使用课程,可以采用这种方法。

export interface IBrand {
brandID: number;
name: string;
image: string;
}

现在您可以为像这样的类型化变量创建空对象。

brand: IBrand = {} as IBrand;

如果只想将其用于类型安全,请避免使用类,而应使用interface作为最佳做法,以减小包的大小。

答案 3 :(得分:0)

您可能已经发现了,但是您可以/应该使用: newBrand: IBrand = {}; 如果您的界面属性是可选的:

export interface IBrand {
    brandID?: number;
    name?: string;
    image?: string;
}

答案 4 :(得分:-1)

你必须为类型编写一个类。不是接口。

newBrand: Brand = new Brand();