javascript 如何在Angular 7中添加表格中的行组件？

kiayqfof 于 2023-02-15 发布在 Java

关注(0)|答案(3)|浏览(114)

我使用最新版本的英语。（7.2.0）我有个人的tr组件，如：

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

@Component({
selector: 'app-table-row',
templateUrl: './table-row.component.html',
styleUrls: ['./table-row.component.scss']
})
export class TableRowComponent implements OnInit {
@Input() character: any;
@Input() columns: string[];

constructor() { }

ngOnInit() {
}

}

我想在表中使用此组件，如下所示：

<table class="mat-elevation-z8">
<tr>
   <th *ngFor="let c of columns">{{c}}</th>
</tr>
<tr app-table-row class="component-style table-row-component" *ngFor="let ch of characters | async" 
   [character]="ch" 
  [columns]="columns">
</tr>

</table>

得到错误，如：

Can't bind to 'character' since it isn't a known property of 'tr'. ("table-row class="component-style table-row-component" *ngFor="let ch of characters | async" 
       [ERROR ->][character]="ch" 
      [columns]="columns">
  </tr>
"): ng:///AppModule/TableComponent.html@7:7

如何在表内正确添加我的组件？

JavaScript

来源：https://stackoverflow.com/questions/55446740/how-to-add-row-component-in-table-in-angular-7

3条答案

按热度按时间

6vl6ewon1#

将组件选择器定义为带方括号的属性选择器：

@Component({
  selector: 'tr[app-table-row]',
  ...
})

以便将其设置为tr元素的属性：

<tr app-table-row ...>

赞(0）回复(0）举报 2023-02-15

yfwxisqw2#

正如@ConnorsFan提到的，您需要通过在组件的选择器中添加方括号来将组件定义为属性，但不需要在它前面添加'tr'，因此下面的代码应该很好：

@Component({
  selector: '[app-table-row]',
  ...
})

然后按如下方式使用它：

<tr app-table-row 
    *ngFor="let item of items"
    [myProp]="item"
    (myEvent)="executeEvent($event)"
    ...>
</tr>

赞(0）回复(0）举报 2023-02-15

hfwmuf9z3#

当您一次只想生成一行时，选择属性'tr[app-table-row]'的方法很好，但对于许多行来说，这种方法可能会变得很麻烦，例如，如果您需要使用multiple row span
在本例中，只需使用常规选择器'app-table-rows'并将组件的主机显示设置为contents。

:host {
  display: contents;
}

demo

赞(0）回复(0）举报 2023-02-15

我来回答

javascript 如何在Angular 7中添加表格中的行组件？

3条答案

相关问题

热门标签

最新问答