Question

我正在构建一个通用表控件，我希望能够在许多不同的表单中使用它。但是，一些不同的行将需要不同的模板。模板标签是我不太了解的东西。

我想要完成的是，如果它不是一个日历，那么如果做另一件事就做一件事。

我的尝试：

<tr *ngFor="let row of rows">
  <td *ngIf="canEditRecord">
    <a class="btn fa fa-pencil-square" (click)="navigateToEdit(row.id)"></a>
  </td>
  <td *ngFor="let column of columns" [innerHTML]="getPropertyValue(row, column.propertyName)"></td>
  <td *ngIf="canDelete && canEditRecord">
    <a class="btn fa fa-trash-o" (click)="deleteItem(row.id)"></a>
  </td>
</tr>


<tr *ngFor="let row of rows">
  <td *ngFor="let day of row">{{day.dayNumber}}</td>
</tr>

然后我试了

<template>
  <tr *ngFor="let row of rows">
    <td *ngIf="canEditRecord">
      <a class="btn fa fa-pencil-square" (click)="navigateToEdit(row.id)"></a>
    </td>
    <td *ngFor="let column of columns" [innerHTML]="getPropertyValue(row, column.propertyName)"></td>
    <td *ngIf="canDelete && canEditRecord">
      <a class="btn fa fa-trash-o" (click)="deleteItem(row.id)"></a>
    </td>
  </tr>
</template>


<template>
  <tr *ngFor="let row of rows">
    <td *ngFor="let day of row">{{day.dayNumber}}</td>
  </tr>
</template>

Then I tried


<tr *ngif="!isCalendar" *ngFor="let row of rows">
  <td *ngIf="canEditRecord">
    <a class="btn fa fa-pencil-square" (click)="navigateToEdit(row.id)"></a>
  </td>
  <td *ngFor="let column of columns" [innerHTML]="getPropertyValue(row, column.propertyName)"></td>
  <td *ngIf="canDelete && canEditRecord">
    <a class="btn fa fa-trash-o" (click)="deleteItem(row.id)"></a>
  </td>
</tr>


<tr *ngif="isCalendar" *ngFor="let row of rows">
  <td *ngFor="let day of row">{{day.dayNumber}}</td>
</tr>

Angular2不允许我在同一语句中使用*ngFor和*ngIf。然后我想我会做*ngIf [ngSwitch]与*ngIF类似的事情，因为与*ngCase let btnback = UIButton(type: .custom) btnback.setTitle("< Back", for: .normal) btnback.frame = CGRect(x: 0, y: 0, width: 30, height: 30) btnback.addTarget(self, action: #selector(Class.Methodname), for: .touchUpInside) let leftItem1 = UIBarButtonItem(customView: btnback) let btnMenu = UIButton(type: .custom) btnMenu.setTitle("Menu", for: .normal) btnMenu.frame = CGRect(x: 0, y: 0, width: 30, height: 30) btnMenu.addTarget(self, action: #selector(Class.MethodName), for: .touchUpInside) let leftItem2 = UIBarButtonItem(customView: btnMenu) self.navigationItem.setLeftBarButtonItems([leftItem1,leftItem2], animated: true)上的header("Content-type: application/json");相同的原因。有人可以告诉我这样做的最佳方法。请注意，我确信稍后我会有更多的模板来构建它，所以我认为我应该能够在以后重用相同的解决方案。

Answer 1

不允许在一个元素上使用两个结构模板（*）语句。为了避免使用冗余元素，您可以使用ng-container组件来获得所需内容：

<ng-container *ngIf="!isCalendar">
    <tr *ngFor="let row of rows">
        <td *ngIf="canEditRecord"><a class="btn fa fa-pencil-square" (click)="navigateToEdit(row.id)"></a></td>
        <td *ngFor="let column of columns" [innerHTML]="getPropertyValue(row, column.propertyName)"></td>
        <td *ngIf="canDelete && canEditRecord"><a class="btn fa fa-trash-o" (click)="deleteItem(row.id)"></a></td>
    </tr>
</ng-container>

Answer 2

你真的应该看看Template guide。特别是关于template tag。

的部分

那就是说。 *语法实际上只是模板使用的快捷方式。您需要查找要用于*ngIf和*ngFor的指令，因为每个指针都需要设置稍微不同的属性。 好处是，您可以根据需要嵌套这些模板组件，而无需添加任何额外的dom元素：）

最简单的是* ngIf（*ngIf="!isCalendar"）：

<template [ngIf]="!isCalendar">

你也可以* ngFor（*ngFor="let row of rows"）

<template ngFor let-row [ngForOf]="rows">

坚持并将它们嵌套在普通的html元素甚至角度组件周围：）

在角度为2

2 个答案: