Angular - ngFor 在一列中显示所有项目

Question

在我的 Angular 项目中，我使用 ngFor 在表格中显示数据，出于某种原因，所有数据都显示在第一列中。 编辑 - 让这个工作，但现在我的 ngSwitch 遇到了问题。我在 pto-row-edit 上收到一条错误消息，指出它无法绑定(bind)到“pto”，因为它不是“tr”的已知属性。我要做的是拥有它，以便使用 row-display.component 在网格中显示数据，然后在选择行时，以显示 row-ediT。组件 代替。

这是我调用我的 row-edit.component 的地方:

<table class="table table-striped table-bordered" *ngIf="empInfo && empInfo.length > selectedEmployee">
  <thead>
    <tr>
      <th>Date</th>
      <th>Full/Half</th>
      <th>Hours</th>
      <th>Scheduled?</th>
      <th>Notes</th>
      <th>In P/R?</th>
    </tr>
  </thead>  
  <tbody>
    <ng-container *ngFor="let pto of (ptoData | currentEmployee:empInfo[selectedEmployee].EmpKey)">
      <ng-container [ngSwitch]="isRowSelected()">
        <ng-container *ngSwitchCase="false">
          <tr pto-row-display [pto]="pto" *ngIf="pto.type === selectedType"></tr>
        </ng-container>
        <ng-container *ngSwitchCase="true">
          <tr pto-row-edit [pto]="pto" [rowSelected]="rowSelected" *ngIf="pto.type === selectedType"></tr>
        </ng-container>
    </ng-container>
   </ng-container>
  </tbody>
</table>

这是我的 row-edit.component.ts:

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

import { PTOData } from './pto-data';

@Component({
    selector: '[pto-row-edit]',
    templateUrl: `./row-edit.component.html`,
    styleUrls: ['./row-edit.component.css']
})

export class RowEditComponent {
    @Input() pto: PTOData[];
}

这是我的 row-edit.component.html:

<td><input class='form-control' type="text" id="ptoDate" [ngModel]="pto.date | date: 'MM/dd/y'" (ngModelChange)="pto.date=$event" name="ptoDate" /></td>
<td>
  <select class="form-control" id="ptoFullHalf" [(ngModel)]="pto.fullhalf" name="ptoFullHalf">
    <option value="full">Full</option>
    <option value="AM">AM</option>
    <option value="PM">PM</option>
    <option value="(full)">(Full)</option>
    <option value="(half)">(Half)</option>
  </select>
</td>
<td>
  <select class="form-control" id="ptoHours" [(ngModel)]="pto.hours" name="ptoHours">
    <option value="4">4</option>
    <option value="8">8</option>
    <option value="-4">-4</option>
    <option value="-8">-8</option>
  </select>
</td>
<td>
  <select class="form-control" id="ptoScheduled" [(ngModel)]="pto.scheduled" name="ptoScheduled">
    <option value=""></option>
    <option value="advanced">Advanced</option>
    <option value="scheduled">Scheduled</option>
    <option value="unscheduled">Unscheduled</option>
  </select>
</td>
<td><input class='form-control' type="text" id="ptoNotes" [(ngModel)]="pto.notes" name="ptoNotes" /></td>
<td>
  <input class="form-check-input" type="checkbox" id="ptoinPR" [(ngModel)]="pto.inPR" name="ptoinPR" />
</td>

我真的觉得这应该行得通，但我不太确定为什么行不通。

Answer 1

在 table 元素中，您不能直接在其中放置自定义元素。如果您在 table 元素中添加自定义元素，它们将被视为无效的 html，并且这些元素将从 table 标记中抛出。

对于这种情况，我建议您将组件选择器属性设为基于，然后将 pto.type === selectedType 条件移动到 ngFor 的 CustomPipe，以便我们可以去掉 ng-container。也许您可以使用 pto.type === selectedType(此检查)扩展 currentEmployee Pipe 本身。之后直接将 pto-row-display 放在 tr 上作为属性。

selector: '[pto-row-display]'

然后将其用作属性

<table class="table table-striped table-bordered" *ngIf="empInfo && empInfo.length > selectedEmployee">
  <thead>
   <tr>
    <th>Date</th>
    <th>Full/Half</th>
    <th>Hours</th>
    <th>Scheduled?</th>
    <th>Notes</th>
    <th>In P/R?</th>
   </tr>
  </thead>
  <tbody>
   <tr 
    *ngFor="let pto of (ptoData | currentEmployee:empInfo[selectedEmployee].EmpKey):selectedType" 
    pto-row-display [pto]="pto">
    </tr>
  </tbody>
</table>

currentEmployee 管道

import { Pipe, PipeTransform } from '@angular/core';

import { PTOData } from './pto-data';

@Pipe({ name: 'currentEmployee' })
export class CurrentEmployee implements PipeTransform {
    transform(allData: PTOData[], key: number, selectedType: any) {
        return (allData ? allData.filter(emp => emp.EmpKey == key && emp.type === selectedType) : []);
    }
}