web-dev-qa-db-fra.com

Angular 2: Impossible de se lier à x car ce n'est pas une propriété native connue

Dans Angular 2 composant j'ai 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;

}

Dans le navigateur, j'ai des erreurs "ne peut pas se lier à 'NgModel' car ce n'est pas une propriété native connue" et "ne peut pas se lier à 'NgIf' car ce n'est pas une propriété native connue ".

J'utilise la version bêta 8.

angularangular2-template
52
Arman Hayots

essayez d'utiliser [(ngModel)] plutôt que *NgModel et *ngIf au lieu de *NgIf

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

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

En général, l'erreur can't bind to xxx since it isn't a known native property se produit lorsque vous avez une faute de frappe dans votre code HTML lorsque vous essayez d'utiliser une directive d'attribut ou lorsque vous essayez de configurer une liaison de propriété.

Les exemples courants sont lorsque vous manquez un * ou un # ou let ou utilisez in à la place de of avec le Angular construit- dans les directives structurelles:

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

Une faute d’orthographe ou un cas erroné génèrera également le problème:

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

Une autre raison est que vous spécifiez une propriété qui n'existe pas sur l'élément ou le composant DOM:

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

Pour les fautes de frappe avec les directives intégrées Angular, cette dernière ne correspondant à aucun des sélecteurs de directives intégrées, Angular essaie de configurer une liaison à une propriété du DOM. élément (le div dans les exemples ci-dessus) avec le nom de la typo. Cela échoue car une div n'a pas de propriété native ngIf ou ngFer ou prop1 DOM.

-

Pour les attributs (pas les propriétés), vous devez utiliser une liaison d'attribut, par exemple pour height attribut de svg: <svg [attr.height]="myHeightProp">

44
Mark Rajcok