Angular 2：不能绑定到x，因为它不是一个已知的本地属性

在Angular 2组件中，我有authbox.component.ts

import {Component} from 'angular2/core'; import {COMMON_DIRECTIVES} from 'angular2/common'; import {Credentials} from './credentials' @Component({ selector: 'authbox', template: `<div> <div class="login-panel" *NgIf="!IsLogged"> <input type="text" *NgModel="credentials.name" /> <input type="password" *NgModel="credentials.password" /> <button type="button" (click)="signIn(credentials)">→| Sign In</button> </div> <div class="logged-panel" *NgIf="IsLogged"> <span>{nickname}</span>&nbsp;&nbsp; <button type="button" (click)="signOut()">|→ Sign out</button> </div> </div>`, directives: [COMMON_DIRECTIVES] }) export class AuthBoxComponent { private _isLogged: boolean; get IsLogged(): boolean { return this._isLogged } set IsLogged(value: boolean) { this._isLogged = value; } public credentials: Credentials; } 

在浏览器中，我得到错误« 无法绑定到'NgModel'，因为它不是一个已知的本地属性 »和« 无法绑定到'NgIf'，因为它不是一个已知的本地属性 »。

我正在使用beta 8。

Answer 1

尝试使用[(ngModel)]而不是*NgModel和*ngIf而不是*NgIf

 <span>{{nickname}}</span>&nbsp;&nbsp; <button type="button" (click)="signOut()">|→ Sign out</button> export class AuthBoxComponent { nickname="guest"; ... } 

Answer 2

一般来说，当你试图使用一个属性指令，或者在试图设置一个属性绑定的时候，当你在你的HTML中有一个input错误时， can't bind to xxx since it isn't a known native property 。

常见的例子是当你错过一个*或一个#或let或使用而不是Angular内置的结构指令：

 <div ngIf="..." // should be *ngIf <div ngFor="..." // should be *ngFor="..." <div *ngFor="let item in items" // should be "let item of items" <div *ngFor="item of items" // should be "let item of items" 

拼写错误或错误的情况也会产生问题::

 <div *ngFer="..." <div *NgFor="..." 

另一个原因是，如果您指定了DOM元素或组件中不存在的属性：

 <div [prop1]="..." // prop1 isn't a valid DOM property for a div <my-comp [answr]="..." // typo, should be [answer] 

---

对于内置Angular指令的拼写错误，由于拼写错误与任何内置指令select器都不匹配，因此Angular尝试设置绑定到DOM元素的属性（上例中的div ）名称。 这失败了，因为div没有native ngIf或ngFer或prop1 DOM属性。

–

对于属性（而不是属性），您需要使用属性绑定，例如svg height属性： <svg [attr.height]="myHeightProp">