首頁猿問 Angular2表行作為組件

Angular2表行作為組件

AngularJS

慕工程0101907 2019-10-18 14:52:02

我正在實驗angular2 2.0.0-beta.0我有一張桌子，線的內容是由angular2生成的： <table> <tr *ngFor="#line of data"> .... content .... </tr> </table>現在這可行，我想將內容封裝到組件“表格行”中。 <table> <table-line *ngFor="#line of data" [data]="line"> </table-line> </table>并且在組件中，模板具有<tr> <td>內容。但是現在該表不再起作用。這意味著內容不再顯示在列中。在瀏覽器中，檢查器向我顯示DOM元素如下所示： <table> <table-line ...> <tbody> <tr> ....我該如何進行這項工作？

查看完整描述

3 回答

瀟湘沐

TA貢獻1816條經驗獲得超6個贊

使用現有的表格元素作為選擇器

table元素不允許將<table-line>元素作為子元素，瀏覽器只會在找到它們時將其刪除。您可以將其包裝在組件中，并仍然使用允許的<tr>標簽。只是"tr"用作選擇器。

使用 <template>

<template>也應被允許，但并非在所有瀏覽器中都適用。Angular2實際上從不<template>向DOM 添加元素，而只是在內部對其進行處理，因此，它也可以在所有帶有Angular2的瀏覽器中使用。

屬性選擇器

另一種方法是使用屬性選擇器

@Component({

selector: '[my-tr]',

...

})

像

反對回復 2019-10-18

四季花海

TA貢獻1811條經驗獲得超5個贊

我發現該示例非常有用，但在2,2.3版本中不起作用，因此經過大量的頭部抓撓后，只需進行一些小改動即可使其再次起作用。

import {Component, Input} from '@angular/core'

@Component({

selector: "[my-tr]",

})

export class MyTrComponent {

@Input("line") row:any;

}

@Component({

selector: "my-app",

<table>

</table>`

})

export class AppComponent {

title = "Angular 2 - tr attribute selector!";

data = [ [1,2,3], [11, 12, 13] ];

constructor() { console.clear(); }

}

反對回復 2019-10-18

萬千封印

TA貢獻1891條經驗獲得超3個贊

這是一個使用帶有屬性選擇器的組件的示例：

import {Component, Input} from '@angular/core';

@Component({

selector: '[myTr]',

})

export class MyTrComponent {

@Input('myTr') row;

}

@Component({

selector: 'my-app',

<table>

</table>

})

export class AppComponent {

title = "Angular 2 - tr attribute selector";

data = [ [1,2,3], [11, 12, 13] ];

}

輸出：

1 2 3

11 12 13

當然，MyTrComponent中的模板會涉及更多，但是您可以理解。

舊的（beta.0）矮人。

反對回復 2019-10-18

3 回答
0 關注
841 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

Angular2表行作為組件

Angular2表行作為組件

3 回答

添加回答