I have a problem when wanting to generate an ngFor in Angular 2
That's the code I want to insert.
import {Component , Input} from '@angular/core';
import {Tabla} from '../common/tabla';
@Component({
selector: 'table-box',
templateUrl: './table-box.html'
})
export class tableBoxcomponent{
@Input()
table: Tabla;
} <tr class="table">
<th> {{table.name}} </th>
<td> <button class="btn btn-info"> detalle </button></td>
<td> </td>
</tr>this is the one that inserted it by means of an * ngFor
import {Component} from '@angular/core';
import {Tabla} from '../../common/tabla';
const TABLE : Tabla[] = [
{
id: 1,
name: 'SUELDO BASE',
detail:{
tipodoc: "string",
numbrdoc: 12345,
detalle: "string",
fechadoc: "string",
fechapag: "string",
rutproov:"string",
nombreproov: "string",
montodecl: 123,
montodoc: 123,
numbrdocorig: 123
}
},
{
id: 2,
name: 'HORAS EXTRAS',
detail:{
tipodoc: "string",
numbrdoc: 12345,
detalle: "string",
fechadoc: "string",
fechapag: "string",
rutproov:"string",
nombreproov: "string",
montodecl: 123,
montodoc: 123,
numbrdocorig: 123
}
}
];
@Component({
selector: 'tables',
templateUrl: './tables.html'
})
export class Tables{
title:string = 'hola mundo';
tabl: Tabla [] = TABLE;
}
y mi app.Module es
<!-- begin snippet: js hide: false console: true babel: false -->The error when adding the ngFor is:
zone.js:630 Unhandled Promise rejection: Template parse errors:
Can't bind to 'ngForFor' since it isn't a known property of 'table-box'.
1. If 'table-box' is an Angular component and it has 'ngForFor' input, then verify that it is part of this module.
2. If 'table-box' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
<table-box
[table] = "table"
[ERROR ->]*ngFor="let table for tabl">
</table-box>
"): ng:///AppModule/Tables.html@4:5
Property binding ngForFor not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". (" <table class="table table-striped">
<h1></h1>
[ERROR ->]<table-box
[table] = "table"
*ngFor="let table for tabl">
"): ng:///AppModule/Tables.html@2:5 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:
Can't bind to 'ngForFor' since it isn't a known property of 'table-box'.
1. If 'table-box' is an Angular component and it has 'ngForFor' input, then verify that it is part of this module.
2. If 'table-box' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
<table-box
[table] = "table"
[ERROR ->]*ngFor="let table for tabl">
</table-box>
"): ng:///AppModule/Tables.html@4:5
Property binding ngForFor not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". (" <table class="table table-striped">
<h1></h1>
[ERROR ->]<table-box
[table] = "table"
*ngFor="let table for tabl">
"):I have already searched and re-read the entire code, without being able to find my error. some help? What am I missing? thank you very much