template - ngform angular 6
Angular 2: no se puede unir a x ya que no es una propiedad nativa conocida (2)
En general,
can''t bind to xxx since it isn''t a known native property
error
can''t bind to xxx since it isn''t a known native property
cuando se produce un error tipográfico en su HTML al intentar utilizar una directiva de atributo o al intentar configurar un enlace de propiedad.
Los ejemplos comunes son cuando omite un
*
o un
#
o
let
o usa
in
lugar
of
con las directivas estructurales angulares incorporadas:
<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"
Un error ortográfico o incorrecto también generará el problema ::
<div *ngFer="..."
<div *NgFor="..."
Otra razón es si especifica una propiedad que no existe en el elemento o componente DOM:
<div [prop1]="..." // prop1 isn''t a valid DOM property for a div
<my-comp [answr]="..." // typo, should be [answer]
Para errores tipográficos con las directivas angulares integradas, dado que el error tipográfico no coincide con ninguno de los selectores de directivas incorporadas, Angular intenta configurar un enlace a una propiedad del elemento DOM (el
div
en los ejemplos anteriores) con el error tipográfico nombre.
Esto falla porque un
div
no tiene una
ngIf
nativa
ngIf
o
ngFer
o
prop1
DOM.
-
Para los atributos (no las propiedades) debe usar el enlace de atributos, por ejemplo, para el atributo de
height
de
svg
:
<svg [attr.height]="myHeightProp">
Esta pregunta ya tiene una respuesta aquí:
En el componente Angular 2 tengo
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> <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;
}
En el navegador recibí los errores « No se puede vincular a ''NgModel'' ya que no es una propiedad nativa conocida » y « No se puede vincular a ''NgIf'' ya que no es una propiedad nativa conocida ».
Estoy usando beta 8.
intente usar
[(ngModel)]
lugar de
*NgModel
y
*ngIf
lugar de
*NgIf
<span>{{nickname}}</span> <button type="button" (click)="signOut()">|→ Sign out</button>
export class AuthBoxComponent {
nickname="guest";
...
}