本文介绍了如何在 Angular 7 的表格中添加行组件?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着跟版网的小编来一起学习吧！
问题描述
我使用了最新版本的 angular.(7.2.0)我有个人 tr 组件，例如:
I use last version of angluar. (7.2.0) I have personal tr component like:
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() {
}
}
我想在表格中使用这个组件，例如:
I want to use this component inside table like:
<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
如何在表格中正确添加我的组件?
How to add my component correctly inside table?
推荐答案
将组件选择器定义为带方括号的属性选择器:
Define the component selector as an attribute selector with square brackets:
@Component({
selector: 'tr[app-table-row]',
...
})
以便可以将其设置为 tr 元素的属性:
so that it can be set as an attribute of the tr element:
<tr app-table-row ...>
这篇关于如何在 Angular 7 的表格中添加行组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！
本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益，请联系我们，我们会在确认后第一时间进行删除！