2016-03-11 43 views
47

ではないので、私はブラウザでauthbox.component.ts角度2:それは角度2の成分で知られているネイティブのプロパティ

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; 

} 

を持つXにバインドできません私ははバインドできません«エラーを得ました「NgModel」は既知のネイティブプロパティではないため、»および「」はNgIfにバインドできません。これは既知のネイティブプロパティではないため、»です。

私はむしろ代わりに、一般的には*NgIf

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

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

同じエラー。たぶん輸入品と何か? –

+1

私は、angle2のドキュメントでバインディングシンタックスについて話していないと感じました... https://angular.io/docs/ts/latest/guide/template-syntax.html – Mitchapp

答えて

15

を使用していますしようとしたとき、あなたのHTMLにタイプミスがある場合、can't bind to xxx since it isn't a known native propertyエラーが発生します属性ディレクティブを使用するか、プロパティー・バインディングをセットアップしようとしているとき。あなたが*または#またはletを欠場かビルトイン構造の指令角度で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" 

スペルミスや間違った場合も、問題を生成します。 :あなたはDOM要素またはコンポーネントに存在しないプロパティを指定した場合

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

もう一つの理由は、次のとおりです。

タイプミスが内蔵されたディレクティブのセレクタのいずれにも一致しないため、セットアップに角度試みは(DOM要素のプロパティに結合内蔵の角度指令にタイプミスのために
<div [prop1]="..."  // prop1 isn't a valid DOM property for a div 
<my-comp [answr]="..." // typo, should be [answer] 

、上記の例ではdiv)を入力します。これは、divにネイティブngIfまたはngFerまたはprop1 DOMプロパティがないために失敗します。

- 属性(プロパティではない)のために

あなたはsvgheight属性の例えば、結合属性を使用する必要があります:<svg [attr.height]="myHeightProp">

+1

FYI ...私はわかりませんが、 'beta-8'から' FORM_DIRECTIVES&COMMON_DIRECTIVES'をインポートする必要はありません – micronyks

+0

COMMON_DIRECTIVESとCORE_DIRECTIVESは異なっていますか? –

+0

大文字のバージョンはクラス名を表し、小文字のバージョンはインスタンスを表します。インスタンスを使用します。 – LeeGee

40

*NgModel*ngIfより[(ngModel)]を使用してみてくださいベータ8.

+0

すべての要素のすべてのネイティブDOMプロパティを見つける方法はありますか?私は 'svg'要素の' height'プロパティにバインドしようとしたときに同じ問題を抱えています。 – bartaelterman

+2

私はそのようなリストは認識していません。特に、([MDN(https://developer.mozilla.org/en-US/docs/Web/API/Element)に従って] DOM要素NodeおよびEventTargetから継承し、ParentNode、ChildNode、NonDocumentTypeChildNode、およびAnimatableを実装します。それぞれは独自のプロパティを持つことができます。プロパティを見つけるために、私は通常MDNを使うか、Chromeの開発ツール(Elements、次にPropertiesタブ)を使います。あなたの場合、 'height'はプロパティではなくsvg要素の属性なので、属性バインディングを使う必要があります:' '。 –

+0

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute –