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'，因为它不是已知的原生属性»。

我正在使用测试版 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 中出现拼写错误时，就会发生 can't bind to xxx since it isn't a known native property 错误。

常见的例子是当您错过 * 或 # 或 let 或使用 in 而不是 of 和 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 指令的拼写错误，由于拼写错误与任何内置指令选择器都不匹配，Angular 尝试设置绑定到属性的 DOM 元素（上面示例中的 div）带有拼写错误的名称。这失败了，因为 div 没有原生的 ngIf 或 ngFer 或 prop1 DOM 属性.

--

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

Angular 2：无法绑定到 x，因为它不是已知的本机属性

Angular 2: Can't bind to x since it isn't a known native property

angular2-template

angular

Angular 2：无法绑定到 x，因为它不是已知的本机 属性

Angular 2: Can't bind to x since it isn't a known native property

angular2-template

angular

Angular 2：无法绑定到 x，因为它不是已知的本机属性