Angular 2：由于它不是已知的本地属性，因此无法绑定到x

Question

在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版本。

- Arman Hayots

---

同样的错误。可能是导入的问题吗？ - Arman Hayots

我有一种感觉，你没有看过关于绑定语法的Angular2文档... https://angular.io/docs/ts/latest/guide/template-syntax.html - hzitoun

Answer 1

通常，当您在尝试使用属性指令或设置属性绑定时，在HTML中出现拼写错误时，会出现“无法绑定到 xxx，因为它不是已知的本地属性”的错误。

常见的例子是当您错过了一个* 或 #，或者与Angular内置结构指令一起使用 in 而非 of 时。

<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 内置指令的拼写错误，由于拼写错误不匹配任何内置指令选择器，Angular 会尝试将绑定设置到 DOM 元素（上面示例中的 div）的属性上，使用的是错误的名称。这将失败，因为 div 没有原生的 ngIf 或 ngFer 或 prop1 DOM 属性。

--

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

- Mark Rajcok

---

有没有一种方法可以找到所有元素的本地DOM属性？当我尝试绑定svg元素的height属性时，我遇到了相同的问题。 - bartaelterman

我不知道有这样的列表，特别是考虑到例如（根据MDN），DOM元素继承自Node和EventTarget，并实现ParentNode、ChildNode、NonDocumentTypeChildNode和Animatable。每个都可以有自己的属性。要查找属性，我通常使用MDN或使用Chrome开发工具（Elements，然后是Properties选项卡）。在您的情况下，“height”是svg元素的属性，而不是属性，因此您需要使用属性绑定：<svg [attr.height] =“myHeightProp”>。 - Mark Rajcok

请参阅 https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute。 - Mark Rajcok

我遇到了这个错误，因为我忘记在组件声明中的指令数组中添加指令来声明我的组件。 - Drew Landgrave

对我来说，我忘记在我的模块的“Exports”中添加我的组件。 - Portekoi

Answer 2

尝试使用[(ngModel)]而不是*NgModel，以及使用*ngIf代替*NgIf

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

export class AuthBoxComponent {
    nickname="guest";
    ...
}

- micronyks

---

FYI...我不确定，但自从beta-8版本以来，导入FORM_DIRECTIVES＆COMMON_DIRECTIVES已经不再必要。 - micronyks

COMMON_DIRECTIVES和CORE_DIRECTIVES是不同的东西吗？ - Pardeep Jain

大写的版本指类名，小写的版本指实例。请使用实例。 - Lee Goddard