[英]ngFor in a tr not working as expected in angular2
I'm playing around with angular 2 (first day;)). 我在玩角度2(第一天;)。
I'm using a component that displays a tr, and the another that will repeat tr's inside of it. 我正在使用一个显示tr的组件,另一个将在其内部重复tr的组件。
<h3>Sensor list</h3>
<a (click)="refreshSensors()" class="btn btn-primary">Escanear Sensores</a>
<table class="table">
<thead>
<tr>
<th>Sensor</th>
<th>Description</th>
</tr>
</thead>
<sensor-list [sensors]="sensors"></sensor-list>
</table>
and then, in sensor list: 然后,在传感器列表中:
<h3>Sensor list</h3>
<a (click)="refreshSensors()" class="btn btn-primary">Escanear Sensores</a>
<table class="table">
<thead>
<tr>
<th>Sensor</th>
<th>Description</th>
</tr>
</thead>
<sensor-list [sensors]="sensors"></sensor-list>
</table>
While ngFor is repeating the tr's propertly, i'm getting a tag inside my html that makes the table not displaying as it should: 当ngFor正确地重复tr时,我在html内获取了一个标记,该标记使表格无法正常显示:
<table class="table">
<thead>
<tr>
<th>Sensor</th>
<th>Description</th>
</tr>
</thead>
<sensor-list><tbody><!--template bindings={}--><tr>
<td>R2D2</td>
<td>Description of r2d2</td>
</tr><tr>
<td>C3PO</td>
<td>Description of c3po</td>
</tr></tbody></sensor-list>
</table>
Do I have to specify the tag i want to display in the component? 我是否必须指定要在组件中显示的标签? what is the correct way of doing this in angular?
正确地做到这一点的正确方法是什么?
I want to expand on that a little bit more. 我想进一步扩展一下。 This is tricky one.
这是一个棘手的问题。 Probably most of the people starting with dynamically rendered tables encountered that.
可能大多数从动态呈现表开始的人都遇到了这种情况。
Here is the code you've got (cleaned): 这是您得到(清除)的代码:
import { Component } from '@angular/core';
@Component({
selector: 'table-body',
template: `
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
`
})
class TableBodyComponent {}
@Component({
selector: 'sg-app',
template: `
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<table-body></table-body>
</table>
`,
directives: [TableBodyComponent]
})
export class AppComponent {}
What Angular renders is the following: Angular渲染的内容如下:
And it's not a valid HTML (ref: MDN Table ). 这不是有效的HTML(参考: MDN Table )。 This way view is broken and unpredictable.
这种方式的视图是残破的且不可预测的。
However you still can add components or directives (as an attribute) to the <tr>
tag: 但是,您仍然可以将组件或指令(作为属性)添加到
<tr>
标记中:
import { Component } from '@angular/core';
@Component({
selector: '[table-row]',
template: `
<td>Cell 1</td>
<td>Cell 2</td>
`
})
class TableBodyComponent {}
@Component({
selector: 'sg-app',
template: `
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr table-row></tr>
</tbody>
</table>
`,
directives: [TableBodyComponent]
})
export class AppComponent {}
This way you can also add *ngFor
to the <tr>
这样,您还可以将
*ngFor
添加到<tr>
Your sensor-list component should be like this 您的传感器列表组件应如下所示
Is your sensor component like this 您的传感器组件是这样的吗
import {Component, Input} from 'angular2/core';
@Component({
selector: 'sensor-list',
template: `
<tbody>
<tr *ngFor="let row of sensors">
<td>{{row.sensor}}</td>
<td>{{row.description}}</td>
</tr>
<tbody>
`,
providers: []
})
export class Sensor {
@Input('sensors') type: any;
constructor() {}
}
And your home component's template should be like this : 您的home组件的模板应如下所示:
<sensor-list [sensors]="sensors"></sensor-list>
Do something alike 做同样的事情
PARENT COMPONENT TEMPLATE 父组件模板
<tr tool *ngFor='let tool of tools' [_tool]='tool'>
CHILD COMPONENT 儿童组件
import {Component, Input, OnChanges} from '@angular/core'
import {ITool} from '../../app/common/interfaces/ITool'
@Component({
selector: '[tool]',
templateUrl: 'app/toolslist/tool.template.html',
styleUrls: ['app/toolslist/tool.style.css'],
})
export class ToolComponent implements OnChanges{
@Input() _tool: ITool;
constructor() {
}
ngOnChanges():void{
console.log(this._tool);
};
}
Angular 2 always leaves the host tag in the DOM and only inserts the HTML from your template into this host tag. Angular 2始终将host标签留在DOM中,并且仅将模板中的HTML插入此host标签。 Since a list of
tr
tags isn't really a good use for a component, I would rethink your code design choice there. 由于
tr
标记列表并不是组件的真正好用,因此我会在这里重新考虑您的代码设计选择。 It would probably be better to put the whole table into a component. 将整个表放入一个组件中可能会更好。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.