Question

我将来自angular1的原始工作代码如下：

<div align="center" ng-show="showWords" >
    <div ng-repeat="word in whichArray | limitTo:limitToMain" ng-if="$index % 2 == 0" class="row">
        <div class="col" align="right" style="margin-right:1cm;"><h3>{{whichArray[$index]}}</h3></div>
        <div class="col" align="left" style="margin-left:1cm;"><h3>{{whichArray[$index + 1]}}</h3></div>    
    </div>
</div>

当我尝试将其转换为angular2代码后：

<div align="center" *ngIf="showWords" >
    <div *ngFor="let word of whichArray | limitTo:limitToPresent" *ngIf="$index % 2 == 0" class="row">
        <div class="col" align="right" style="margin-right:1cm;"><h3>{{whichArray[$index]}}</h3></div>
        <div class="col" align="left" style="margin-left:1cm;"><h3>{{whichArray[$index + 1]}}</h3></div>    
    </div>
</div>

我收到Can't have multiple template bindings on one element. Use only one attribute named 'template' or prefixed with *错误。我创建了一个名为limitTo的管道。

如何解决此错误？

Answer 1

错误是因为你在angular2中的相同元素上使用ngFor和ngIf，你可以在单个元素上使用其中任何一个元素，因为angular2提供<template>指令迭代代码下面的元素将起作用。

<div align="center" *ngIf="showWords" >
  <template ngFor [ngForOf]="whichArray | limitTo:limitToPresent" let-item let-i="index">
    <div *ngIf="i % 2 == 0" class="row">
        <div class="col" align="right" style="margin-right:1cm;"><h3>{{whichArray[i]}}</h3></div>
        <div class="col" align="left" style="margin-left:1cm;"><h3>{{whichArray[i + 1]}}</h3></div>
    </div>
  </template>
</div>

<template>以角度4折旧，因此您可以使用<ng-template>

<div align="center" *ngIf="showWords" >
  <ng-template ngFor [ngForOf]="whichArray | limitTo:limitToPresent" let-item let-i="index">
    <div *ngIf="i % 2 == 0" class="row">
        <div class="col" align="right" style="margin-right:1cm;"><h3>{{whichArray[i]}}</h3></div>
        <div class="col" align="left" style="margin-left:1cm;"><h3>{{whichArray[i + 1]}}</h3></div>
    </div>
  </ng-template>
</div>

Angular2多重绑定错误

1 个答案: