Angular 2: не может привязаться к x, так как это не известное собственное свойство [дубликат]


этот вопрос уже есть ответ здесь:

  • Не могу привязать к 'НГ-соответствующих, так как не известно родной собственность 9 ответов

в угловой 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.

2   51   2016-03-11 15:10:29

2 ответа:

попробуйте использовать [(ngModel)], а не *NgModel и *ngIf вместо *NgIf

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

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

в общем,can't bind to xxx since it isn't a known native property ошибка возникает при наличии опечатки в HTML при попытке использовать директиву атрибута или при попытке настроить привязку свойств.

общие примеры, когда вы пропускаете * или # или 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"

опечатка или неправильный случай также вызовет проблему::

<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 пытается установить привязку к свойству элемента DOM (div в приведенных выше примерах) с опечаткой в имени. Это не удается, потому что a div не имеет родного ngIf или ngFer или prop1 свойства DOM.

--

для атрибуты (не свойства) необходимо использовать привязку атрибутов, например для на svg:<svg [attr.height]="myHeightProp">