第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

Angular2表行作為組件

Angular2表行作為組件

慕工程0101907 2019-10-18 14:52:02
我正在實(shí)驗(yàn)angular2 2.0.0-beta.0我有一張桌子，線的內(nèi)容是由angular2生成的：    <table>        <tr *ngFor="#line of data">            .... content ....        </tr>    </table>現(xiàn)在這可行，我想將內(nèi)容封裝到組件“表格行”中。    <table>        <table-line *ngFor="#line of data" [data]="line">        </table-line>    </table>并且在組件中，模板具有<tr> <td>內(nèi)容。但是現(xiàn)在該表不再起作用。這意味著內(nèi)容不再顯示在列中。在瀏覽器中，檢查器向我顯示DOM元素如下所示：    <table>        <table-line ...>            <tbody>                <tr> ....我該如何進(jìn)行這項(xiàng)工作？
查看完整描述

3 回答

?
瀟湘沐

TA貢獻(xiàn)1816條經(jīng)驗(yàn) 獲得超6個(gè)贊

使用現(xiàn)有的表格元素作為選擇器


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


使用 <template>


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


屬性選擇器


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


@Component({

  selector: '[my-tr]',

  ...

})

像


<tr my-tr>


查看完整回答
反對(duì) 回復(fù) 2019-10-18
?
四季花海

TA貢獻(xiàn)1811條經(jīng)驗(yàn) 獲得超5個(gè)贊

我發(fā)現(xiàn)該示例非常有用，但在2,2.3版本中不起作用，因此經(jīng)過大量的頭部抓撓后，只需進(jìn)行一些小改動(dòng)即可使其再次起作用。


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


@Component({

  selector: "[my-tr]",

  template: `<td *ngFor='let item of row'>{{item}}</td>`    

})

export class MyTrComponent {

  @Input("line") row:any;

}


@Component({

  selector: "my-app",

  template: `<h1>{{title}}</h1>

  <table>

    <tr  *ngFor="let line of data" my-tr [line]="line"></tr>

  </table>`


})

export class AppComponent {


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

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

  constructor() { console.clear(); }

}


查看完整回答
反對(duì) 回復(fù) 2019-10-18
?
萬(wàn)千封印

TA貢獻(xiàn)1891條經(jīng)驗(yàn) 獲得超3個(gè)贊

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


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

@Component({

  selector: '[myTr]',

  template: `<td *ngFor="let item of row">{{item}}</td>`

})

export class MyTrComponent {

  @Input('myTr') row;

}

@Component({

  selector: 'my-app',

  template: `{{title}}

  <table>

    <tr *ngFor="let line of data" [myTr]="line"></tr>

  </table>

  `

})

export class AppComponent {

  title = "Angular 2 - tr attribute selector";

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

}

輸出：


1   2   3

11  12  13

當(dāng)然，MyTrComponent中的模板會(huì)涉及更多，但是您可以理解。


舊的（beta.0）矮人。


查看完整回答
反對(duì) 回復(fù) 2019-10-18
  • 3 回答
  • 0 關(guān)注
  • 840 瀏覽

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)