如何在Angular 8应用程序中直接在tr标签中显示每个表行的内容？

huangapple
go评论99阅读模式
英文:

How can I display the contents of every table row directly in the tr tag in an Angular 8 app?

问题

我使用Angular 8开发应用程序。

employee-list 组件在表格中显示数据。

在 employee-list.component.ts 文件中：

  1. public displayMode: String = 'grid';
  2. public deptno: number = -1;
  3. public empsArray: Employee[] = data.employees;
  5. public removeEmployee(empno: number) {
  6.   this.empsArray = this.empsArray.filter((item) => item.empno != empno);
  7. }
  9. public filterByDepartment(num: number) {
  10.   this.deptno = num;
  11. }
  13. public setDisplayMode(mode: String) {
  14.   this.displayMode = mode;
  15. }

在视图中：

  1. <div class="table-responsive">
  2.   <table class="table table-striped">
  3.     <thead>
  4.       <tr>
  5.         <th>Full Name</th>
  6.         <th>Job</th>
  7.         <th>Actions</th>
  8.       </tr>
  9.     </thead>
  10.     <tbody>
  11.       <tr *ngFor="let employee of empsArray | filter: deptno">
  12.         <app-employee-table-item [employee]="employee"></app-employee-table-item>
  13.       </tr>
  14.     </tbody>
  15.   </table>
  16. </div>

每个表格行的内容由一个名为 employee-table-item 的（子）组件处理：

  1. @Input() employee: Employee;

问题

由于每个表格行的内容都包装在 <app-employee-table-item></app-employee-table-item> 元素中，表格显示不正确。

我想直接在 <tr> 标签中显示每个表格行的内容，同时保持模板在一个单独的HTML文件中。

问题

在 <tr> 标签中直接显示每个表格行的内容的最可靠方式是什么？

英文:

I have been working an app with Angular 8.

The employee-list component displays data in a table.

In employee-list.component.ts I have:

  1. import { Component } from &#39;@angular/core&#39;;
  2. import { Employee } from &#39;../../models/empModel&#39;;
  3. import * as data from &#39;../../data/employees&#39;;
  5. @Component({
  6.   selector: &#39;app-employee-list&#39;,
  7.   templateUrl: &#39;./employee-list.component.html&#39;,
  8.   styleUrls: [&#39;./employee-list.component.css&#39;],
  9. })
  10. export class EmployeeListComponent {
  11.   public displayMode: String = &#39;grid&#39;;
  12.   public deptno: number = -1;
  13.   public empsArray: Employee[] = data.employees;
  15.   public removeEmployee(empno: number) {
  16. 	this.empsArray = this.empsArray.filter((item) =&gt; item.empno != empno);
  17.   }
  19.   public filterByDepartment(num: number) {
  20. 	this.deptno = num;
  21.   }
  23.   public setDisplayMode(mode: String) {
  24. 	this.displayMode = mode;
  25.   }
  26. }

In the view:

  1. &lt;div class=&quot;table-responsive&quot;&gt;
  2.     &lt;table class=&quot;table table-striped&quot;&gt;
  3.       &lt;thead&gt;
  4.         &lt;tr&gt;
  5.           &lt;th&gt;Full Name&lt;/th&gt;
  6.           &lt;th&gt;Job&lt;/th&gt;
  7.           &lt;th&gt;Actions&lt;/th&gt;
  8.         &lt;/tr&gt;
  9.       &lt;/thead&gt;
  10.       &lt;tbody&gt;
  11.         &lt;tr *ngFor=&quot;let employee of empsArray | filter: deptno&quot;&gt;
  12.           &lt;app-employee-table-item
  13.             [employee]=&quot;employee&quot;
  14.           &gt;&lt;/app-employee-table-item&gt;
  15.         &lt;/tr&gt;
  16.       &lt;/tbody&gt;
  17.     &lt;/table&gt;
  18.   &lt;/div&gt;

As can be seen above, the contents of each table row is handled by a (child)component, called employee-table-item:

  1. import { Component, EventEmitter, Input, Output } from &#39;@angular/core&#39;;
  2. import { Employee } from &#39;../../models/empModel&#39;;
  4. @Component({
  5.   selector: &#39;app-employee-table-item&#39;,
  6.   templateUrl: &#39;./employee-table-item.component.html&#39;,
  7.   styleUrls: [&#39;./employee-table-item.component.css&#39;],
  8. })
  9. export class EmployeeTableItemComponent {
  10.   @Input() employee: Employee;
  11. }

The problem

The table is diplsyed wrongly, due to the fact that the contents of every table row is wrapped in a &lt;app-employee-table-item&gt;&lt;/app-employee-table-item&gt; element.

I want display the contents of every table row directly in the <tr> tag, while keeping the template in a distinct HTML file.

Question

What is the most reliable way to display the contents of every table row directly in the &lt;tr&gt; tag?

答案1

得分: 3

A solution would be to use your component as a directive. It is pretty common to do that exactly in your case.

app-employee-table-item:

  1. @Component({
  2.   selector: '[appEmployeeTableItem],app-employee-table-item',
  3.   templateUrl: './employee-table-item.component.html',
  4.   styleUrls: ['./employee-table-item.component.css'],
  5. })
  6. export class EmployeeTableItemComponent {
  7.   @Input('appEmployeeTableItem') employee: Employee;
  8. }

EmployeeList.html:

  1.   <tbody>
  2.     <tr
  3.       *ngFor="let employee of empsArray | filter: deptno"
  4.       [appEmployeeTableItem]="employee"
  5.     ></tr>
  6.   </tbody>
英文:

A solution would be to use your component as a directive. It is pretty common to do that exactly in your case.

app-employee-table-item:

  1. @Component({
  2.   selector: &#39;[appEmployeeTableItem],app-employee-table-item&#39;,
  3.   templateUrl: &#39;./employee-table-item.component.html&#39;,
  4.   styleUrls: [&#39;./employee-table-item.component.css&#39;],
  5. })
  6. export class EmployeeTableItemComponent {
  7.   @Input(&#39;appEmployeeTableItem&#39;) employee: Employee;
  8. }

EmployeeList.html :

  1.   &lt;tbody&gt;
  2.     &lt;tr
  3.       *ngFor=&quot;let employee of empsArray | filter: deptno&quot;
  4.       [appEmployeeTableItem]=&quot;employee&quot;
  5.     &gt;&lt;/tr&gt;
  6.   &lt;/tbody&gt;

答案2

得分: 1

你可以使用的方法之一是更改从使用标签选择器到使用属性值选择器。

在employee-list.component.html中，将以下代码替换为：

  1. <tr
  2.     data-selector="app-employee-table-item"
  3.     *ngFor="let employee of empsArray | filter: deptno"
  4.     [employee]="employee"
  5. ></tr>

在employee-table-item.component.ts中，将选择器更改为：

  1. selector: '[data-selector=app-employee-table-item]',

现在，Angular不再查找<app-employee-table-item> HTML元素，而是查找具有属性data-selector值为app-employee-table-item的任何HTML元素，并用您的模板替换该元素。

您的Stackblitz，已经进行了此更改：https://stackblitz.com/edit/angular-modal-bootstrap-ke3bbc?file=src%2Fapp%2Fcomponents%2Femployee-list%2Femployee-list.component.html

英文:

An approach you can use is to fix this is to change from using a tag selector to using an attribute value selector.

In employee-list.component.html, replace

  1. &lt;tr *ngFor=&quot;let employee of empsArray | filter: deptno&quot;&gt;
  2.     &lt;app-employee-table-item
  3.         [employee]=&quot;employee&quot;
  4.     &gt;&lt;/app-employee-table-item&gt;
  5. &lt;/tr&gt;

with this:

  1. &lt;tr
  2.     data-selector=&quot;app-employee-table-item&quot;
  3.     *ngFor=&quot;let employee of empsArray | filter: deptno&quot;
  4.     [employee]=&quot;employee&quot;
  5. &gt;&lt;/tr&gt;

In employee-table-item.component.ts, change the selector to

  1. selector: &#39;[data-selector=app-employee-table-item]&#39;,

Now, instead of looking for &lt;app-employee-table-item\&gt; HTML elements, Angular will look for any HTML elements with an attribute called data-selector with value of app-employee-table-item and replace that element with your template.

Your Stackblitz, forked, with this change: https://stackblitz.com/edit/angular-modal-bootstrap-ke3bbc?file=src%2Fapp%2Fcomponents%2Femployee-list%2Femployee-list.component.html

huangapple
  • 本文由 发表于 2023年5月24日 20:01:56
  • 转载请务必保留本文链接：https://go.coder-hub.com/76323307.html
  • angular
  • javascript
  • typescript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定