web-dev-qa-db-ja.com

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 'ではないため' NgIf 'にバインドできません既知のネイティブプロパティ"。

ベータ8を使用しています。

angularangular2-template
52
Arman Hayots

*NgModelの代わりに*ngIfと*NgIfではなく[(ngModel)]を使用してみてください

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

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

一般的に、can't bind to xxx since it isn't a known native propertyエラーは、属性ディレクティブを使用しようとしたとき、またはプロパティバインディングを設定しようとしたときにHTMLにタイプミスがあるときに発生します。

一般的な例は、*または#またはletname__を見逃した場合、またはAngular組み込み構造ディレクティブでinname__の代わりにofname__を使用した場合です。

<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="..."

もう1つの理由は、DOM要素またはコンポーネントに存在しないプロパティを指定した場合です。

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

組み込みのAngularディレクティブを持つタイプミスの場合、タイプミスはどの組み込みディレクティブセレクターにも一致しないため、AngularはDOM要素のプロパティ（divname__上記の例では）タイプミスがあります。 divname__にはネイティブのngIfname__またはngFername__またはprop1 DOMプロパティがないため、これは失敗します。

-

（プロパティではなく）属性の場合、属性バインディングを使用する必要があります。たとえば、heightname__のsvgname__属性の場合：<svg [attr.height]="myHeightProp">

43
Mark Rajcok