홈>2020-02-01 00:39

arrays - Angular2 + 하나의 요소에 여러 템플릿 바인딩을 가질 수 없습니다

이 오류가 발생했습니다

와이즈 비즈

그러나이 문제를 해결하는 방법을 모르겠습니다. 수행하려는 것은 내 2D 배열을 표시하고 중첩 루프를 수행해야하기 때문입니다. 나는

Can't have multiple template bindings on one element (" list-group-item-success" [draggable] *ngFor="let item of [vegetables[0][0]]" which I know what it means.

할 것이다 항목을 표시하기 위해 외부 배열을 반복합니다. 따라서 모두 i 에 바인딩되어야합니다. 지령. 그러나 이것이 여러 개의 ngFor를 사용할 수없는 것입니다.

코드는 다음과 같습니다.

draggable

vegetables = [[
{name: 'Carrot', type: 'vegetable'},
{name: 'Onion', type: 'vegetable'},
{name: 'Potato', type: 'vegetable'},
{name: 'Capsicum', type: 'vegetable'}],
[
  {name: 'Carrotas', type: 'vegetable'},
  {name: 'Onionas', type: 'vegetable'},
  {name: 'Potatoas', type: 'vegetable'},
  {name: 'Capsicumas', type: 'vegetable'}]]
<div class="card-block scroll-list">
                <div class="list-group">
                    <li class="list-group-item list-group-item-action list-group-item-success" [draggable] *ngFor="let item of [vegetables[0][0]]"
                      *ngFor="let items of [item.values]"
                        [dragClass]="'active'" [dragTransitClass]="'active'" [dragData]="item" [dragScope]="item.type" [dragEnabled]="dragEnabled">
                        {{items.name}}
                    </li>
                </div>
            </div>

답변 # 1

리 내부에 ng-container를 사용하는 것이 좋습니다. 하나의 HTML 요소에 2 * ngFor를 사용할 수 없습니다.

예 :

<li class="list-group-item list-group-item-action list-group-item-success" [draggable] *ngFor="let item of [vegetables[0][0]]" [dragClass]="'active'" [dragTransitClass]="'active'" [dragData]="item" [dragScope]="item.type" [dragEnabled]="dragEnabled">
    <ng-container *ngFor="let items of [item.values]">
        {{items.name}}
    </ng-container>
</li>

답변 # 2
두 개의 *ngFor 가 있습니다 같은 요소에. 별도의 div 에서 내부를 추출 .
```
<li *ngFor="let item of [vegetables[0][0]]"...
  <div *ngFor="let items of [item.values]" ...
```

Python2.net

arrays - Angular2 + 하나의 요소에 여러 템플릿 바인딩을 가질 수 없습니다

관련 자료