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 ", поскольку он не является известным родным свойством".

Я использую бета-версию 8.

Ответ 1

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

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

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

Ответ 2

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

Общие примеры: если вы пропустите * или # или 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.

-

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