Question

这是我的一段代码

<tr *ngFor="let sample of data; let i = index" [attr.data-index]="i">
    <ng-container *ngIf="sample .configuration_type == 1; then thenBlock; else elseBlock"></ng-container>
       <ng-template #thenBlock>
           <td>{{sample.item_number}}</td>
           <td>{{sample.make}}</td>
           <td>{{sample.model}}</td>
       </ng-template>
       <ng-template #elseBlock>
           <td>{{sample.serial_number}}</td>
           <td>{{sample.capacity}}</td>
           <td>{{sample.model}}</td>
       </ng-template>
</tr>

错误显示为

无法绑定到＆＃39; ngIfThen＆＃39;因为它不是“容器”的已知属性。 1.如果＆＃39; ng-container＆＃39;是一个Angular组件，它有＆＃39; ngIfThen＆＃39;输入，然后验证它是否是该模块的一部分。 2.如果＆＃39; ng-container＆＃39;是一个Web组件，然后添加＆＃34; CUSTOM_ELEMENTS_SCHEMA＆＃34;到了＆＃39; @ NgModule.schemas＆＃39;此组件禁止此消息。（＆＃34; gFor =＆＃34;让数据样本;让我=索引＆＃34; [attr.data-index] =＆＃34; i＆＃34;＆gt;

Answer 1

由于错误说您无法在同一标签上使用ngFor和ngIf，而是使用ng-container执行此操作，

<tr *ngFor="let sample of data; let i = index" [attr.data-index]="i">
    <ng-container *ngIf="sample.configuration_type === 1">
        <td>{{sample.item_number}}</td>
        <td>{{sample.make}}</td>
        <td>{{sample.model}}</td>
        <td>{{bucket.class}}</td>
        <td>{{bucket.capacity}}</td>
    </ng-container>
</tr>

Answer 2

在使用任何structural指令之前，将CommonModule从@angular/common导入您的模块。此外，ngIfElse仅在4.0.0版本之后可用。

对于已编辑的问题：您可以使用带有else语法的ngIf来区分这些项目。

但是这在你的tr元素中：

<ng-container *ngIf="sample.configuration_type === 1; else elseBlock">
    <td>{{sample.item_number}}</td>
    <td>{{sample.make}}</td>
    <td>{{sample.model}}</td>
</ng-container>
<ng-template #elseBlock>
    <td>{{sample.serial_number}}</td>
    <td>{{sample.capacity}}</td>
    <td>{{sample.model}}</td>
</ng-template>

或者只想使用ng-template时：

<ng-template [ngIf]="sample.configuration_type === 1" [ngIfElse]="elseBlock">
    <td>{{sample.item_number}}</td>
    <td>{{sample.make}}</td>
    <td>{{sample.model}}</td>
</ng-template>
<ng-template #elseBlock>
    <td>{{sample.serial_number}}</td>
    <td>{{sample.capacity}}</td>
    <td>{{sample.model}}</td>
</ng-template>

您可以在角度docs page找到有关结构指令的更多信息。

对于Angular版本＆lt; 4.0.0没有ngIfElse指令。你必须这样做：

<ng-template [ngIf]="sample.configuration_type === 1">
    <td>{{sample.item_number}}</td>
    <td>{{sample.make}}</td>
    <td>{{sample.model}}</td>
</ng-template>
<ng-template [ngIf]="sample.configuration_type !== 1">
    <td>{{sample.serial_number}}</td>
    <td>{{sample.capacity}}</td>
    <td>{{sample.model}}</td>
</ng-template>

注意：以下答案是针对最初的问题，OP编辑它以实现另一个目标。

您应该使用例如数组filter方法过滤组件内的数据。

示例：

export class MyComponent {
    // ...
    public get filteredData() {
       return this.data.filter(sample => sample.configuration_type !== 1);
    }
    // ...
}

然后在您的组件中使用filteredData循环：

<tr *ngFor="let sample of filteredData; let i = index" [attr.data-index]="i">
    <td>{{sample.item_number}}</td>
    <td>{{sample.make}}</td>
    <td>{{sample.model}}</td>
    <td>{{bucket.class}}</td>
    <td>{{bucket.capacity}}</td>
</tr>

Answer 3

确保已在AppModule导入中导入<!DOCTYPE html> <html> <head> <title>HomePage</title> <link rel="stylesheet" type="text/css" href=""> </head> <body> <div id="Background"> <img alt="BackgroundIMG" src="C:\Users\Rik van haaren\Desktop\Website\afbeeldingen\Achtergrond.png"> </div> </body> </html>。

从＆＃39; @ angular / common＆＃39;;
导入{CommonModule}

CommonModule

这是一个用于演示if-then-else行为的plunker链接：PLUNKER DEMO

如何在角度2中的ngIf-else中使用表达式

3 个答案: