使用Angular

Question

这是我得到的结果的图像：

我认为您了解问题所在！ 我的td仅显示在第一个单元格上！

这是我的两个modules.html的代码：

表：

<table data-toggle="table"
           data-sort-name="rank"
    >
      <thead>
      <tr>
        <th data-field="rank" data-align="center" data-sortable="true">Rank</th>
        <th data-align="center" data-sortable="flase">Logo</th>
        <th data-align="center" data-sortable="true">Name</th>
        <th data-align="center" data-sortable="true">Short Name</th>
        <th data-align="center" data-sortable="true">Current Supply</th>
        <th data-align="center" data-sortable="true">Price</th>
        <th data-field="mc" data-align="center" data-sortable="true">Market Cap</th>
      </tr>
      </thead>
      <tbody>
       <app-cryptotd *ngFor="let crypto of cryptos"
                     [cryptoName]="crypto.name"
                     [cryptoCurrent]="crypto.coinminde"
                     [cryptoImg]="crypto.imageurl"
                     [cryptoMC]="'255555'"
                     [cryptoPrice]="crypto.open"
                     [cryptoRank]="crypto.rank"
                     [cryptoShortName]="crypto.shortname"
       > </app-cryptotd>
      </tbody>
    </table>

以及每个单元格：

    <tr>
  <td>{{ cryptoRank }}</td>
  <td><img src="https://www.cryptocompare.com{{cryptoImg}}" height="42" width="42"></td>
  <td><a href="#">{{cryptoName}}</a></td>
  <td>{{cryptoShortName}}</td>
  <td>{{cryptoCurrent}}</td>
  <td>{{cryptoPrice}}</td>
  <td>{{cryptoMC}}</td>
</tr>

我不太了解为什么它不起作用，我认为这很愚蠢，但是很好... 并对我的英语不好说

导致开发人员通行费：

    <table _ngcontent-c1="" data-sort-name="rank" data-toggle="table"><thead _ngcontent-c1="">
<tr _ngcontent-c1="">
<th _ngcontent-c1="" data-align="center" data-field="rank" data-sortable="true">Rank</th><th _ngcontent-c1="" data-align="center" data-sortable="flase">Logo</th><th _ngcontent-c1="" data-align="center" data-sortable="true">Name</th><th _ngcontent-c1="" data-align="center" data-sortable="true">Short Name</th><th _ngcontent-c1="" data-align="center" data-sortable="true">Current Supply</th><th _ngcontent-c1="" data-align="center" data-sortable="true">Price</th><th _ngcontent-c1="" data-align="center" data-field="mc" data-sortable="true">Market Cap</th></tr></thead>
<tbody _ngcontent-c1="">
<!--bindings={
      "ng-reflect-ng-for-of": "[object Object],[object Object"
    }-->
<app-cryptotd _ngcontent-c1="" _nghost-c2="" ng-reflect-crypto-name="Bitcoin" ng-reflect-crypto-short-name="BTC" ng-reflect-crypto-img="/media/19633/btc.png" ng-reflect-crypto-price="8176.08" ng-reflect-crypto-current="17179700" ng-reflect-crypto-m-c="255555" ng-reflect-crypto-rank="1">
<tr _ngcontent-c2="">
<td _ngcontent-c2="">1</td>
<td _ngcontent-c2=""><img _ngcontent-c2="" height="42" width="42" src="https://www.cryptocompare.com/media/19633/btc.png"></td>
<td _ngcontent-c2=""><a _ngcontent-c2="" href="#">Bitcoin</a></td>
<td _ngcontent-c2="">BTC</td><td _ngcontent-c2="">17179700</td><td _ngcontent-c2="">8176.08</td><td _ngcontent-c2="">255555</td>
</tr>
</app-cryptotd>
</tbody>
</table>

Answer 1

try this code.

table data-toggle="table"
           data-sort-name="rank"
    >
      <thead>
      <tr>
        <th data-field="rank" data-align="center" data-sortable="true">Rank</th>
        <th data-align="center" data-sortable="flase">Logo</th>
        <th data-align="center" data-sortable="true">Name</th>
        <th data-align="center" data-sortable="true">Short Name</th>
        <th data-align="center" data-sortable="true">Current Supply</th>
        <th data-align="center" data-sortable="true">Price</th>
        <th data-field="mc" data-align="center" data-sortable="true">Market Cap</th>
      </tr>
      </thead>
      <tbody>

       <tr *ngFor="let crypto of cryptos">

               <app-cryptotd
                     [cryptoName]="crypto.name"
                     [cryptoCurrent]="crypto.coinminde"
                     [cryptoImg]="crypto.imageurl"
                     [cryptoMC]="'255555'"
                     [cryptoPrice]="crypto.open"
                     [cryptoRank]="crypto.rank"
                     [cryptoShortName]="crypto.shortname"
               </app-cryptotd>
           </tr>
      </tbody>
    </table>


Please remove <tr> tag from your child component.

Answer 2

我相信这与Angulars内容投影和/或封装有关。我想我在子组件上使用:host selector找到了解决方法

尝试将其添加到您的cryptotd.component.scss：

:host {
  display: contents;
 }

Some Browsers don't support it though