相关疑难解决方法(0)

我正在努力找到一种方法来做到这一点.在父组件中,模板描述了a table及其thead元素,但委托将其呈现tbody给另一个组件,如下所示:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Time</th>
    </tr>
  </thead>
  <tbody *ngFor="let entry of getEntries()">
    <my-result [entry]="entry"></my-result>
  </tbody>
</table>

每个myResult组件都会呈现自己的tr标记,基本上是这样的:

<tr>
  <td>{{ entry.name }}</td>
  <td>{{ entry.time }}</td>
</tr>

我没有直接将它放在父组件中(避免需要myResult组件)的原因是myResult组件实际上比这里显示的更复杂,所以我想把它的行为放在一个单独的组件和文件中.

结果DOM看起来很糟糕.我相信这是因为它是无效的,因为tbody只能包含tr元素(参见MDN),但我生成的(简化的)DOM是:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Time</th>
    </tr>
  </thead>
  <tbody>
    <my-result>
      <tr>
        <td>Bob</td>
        <td>128</td>
      </tr>
    </my-result>
  </tbody>
  <tbody>
    <my-result>
      <tr>
        <td>Lisa</td>
        <td>333</td>
      </tr>
    </my-result>
  </tbody>
</table>

有没有什么方法我们可以得到相同的渲染,但没有包装<my-result>标签,并仍然使用组件独自负责渲染表行？

我已经看过了ng-content,DynamicComponentLoader的ViewContainerRef,但他们似乎并不至于我可以看到提供一个解决的办法.

我有一个表,我想在其中显示一个表行,这是一个组件.而且我还想将数据传递给该组件:

<table>
    <th>
        <td>col 1</td>
        <td>col 2</td>
        <td>col 3</td>
    </th>
    <tr>
        <my-component [data1]="data1" [data2]="data2"></my-component>
    </tr>
    <tr *ngFor="let item of list">
        {{item}}
    </tr>
</table>

在my-component,HTML是少数几个<td></td>从data1和呈现的数据data2.

但是在渲染之后,由于<my-component></my-component>我的CSS破坏导致所有my-componentHTML(整个表行)显示在第1列中.

结果如上:

<table>
    <th>
        <td>col 1</td>
        <td>col 2</td>
        <td>col 3</td>
    </th>
    <tr>
        <my-component>
            <td>data1.prop1</td>
            <td>data1.prop2</td>
        </my-component>
    </tr>
    <tr *ngFor="let item of list">
        {{item}}
    </tr>
</table>

我尝试了以下方法:

@Component({
    selector: '[my-component]',
    templateUrl: 'my-component.html'
})

<tr my-component [data1]="data1" [data2]="data2"></tr>

但这会导致错误Can't bind to 'data1' since it isn't …

我想动态地向表中添加一行.我想在几个表中重用该行.

我尝试使用指令和使用,ng-include但两个选项都没有像我预期的那样工作.

基本上,这就是我做的:

myapp.directive('myRow', function () {
    return {
        restrict : 'E',
        replace : true,
        scope : { mytitle : '@mytitle'},
        template : '<tr><td class="mystyle">{{mytitle}}</td></tr>' 
    }
});

并在HTML中:

<table>
    <tbody>
        <tr><td>data</td></tr>
        <my-row></my-row>
    </tbody>
</table>

该<tr>元素获得绘制但最终之外的<table>在DOM元素.

有没有一种简单的方法来使用angularjs包含表行？