Question

在我的角度项目中，我使用ngFor在表格中显示数据，由于某种原因，它全部显示在第一列中。编辑 - 让这个工作，但现在我遇到了ngSwitch的问题。我在pto-row-edit上收到错误，说它无法绑定到'pto'，因为它不是'tr'的已知属性。我要做的是让它使用row-display.component在网格中显示数据，然后每当选择一行时，显示row-edit.component。

这是我调用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。也许您可以使用currentEmployee扩展pto.type === selectedType管道本身（此检查）。然后直接将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 Pipe

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) : []);
    }
}

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

1 个答案: