홈>
이 오류가 발생했습니다
와이즈 비즈그러나이 문제를 해결하는 방법을 모르겠습니다. 수행하려는 것은 내 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
-
답변 # 2
두 개의
*ngFor
가 있습니다 같은 요소에. 별도의div
에서 내부를 추출 .<li *ngFor="let item of [vegetables[0][0]]"... <div *ngFor="let items of [item.values]" ...
관련 자료
- reactjs - 여러 반복을 피하기 위해 템플릿의 조건을 단순화하는 방법
- python 3.x - 스레드 대신 asyncio를 사용하여 여러 요소 처리
- Angular 8 템플릿 기반 양식 요소 조건부 필수 속성
- Lit Element - 조명 요소 - 하나의 데코레이터에서 여러 속성
- javascript - jQuery $(" class") click ();여러 요소가 작동하지만 마지막 요소가 확인 된 값을 저장하기 전에
- 자바 스크립트를 사용하여 다차원 배열에서 값이 0 인 경우 배열에서 요소를 제거하는 방법
- python - 다중 배열 인덱싱을 사용하여 numpy 배열 요소를 할당 할 수없는 것에 대한 혼란
- javascript - 사용자가 요소를 만들 때 여러 요소의 outerHTML 표시
- docker - traefik - 동일한 호스트 v2에 대한 다중 포트 바인딩
- xspec - 중첩 된 요소가있는 요소를 생성하는 XSLT 템플릿 규칙을 단위 테스트 할 수 없습니다
- python - 나머지 낮은 피크를 남기고 매우 높은 다중 피크 요소 찾기
- python - 한 목록의 각 요소가 다른 목록의 모든 요소의 배수인지 확인
- javascript - Vue는 드롭 다운 업데이트 내에서 여러 바인딩 변경을 감시합니다
- forms - Flask Python으로 jinja 템플릿에서 여러 행 입력 처리
- 매개 변수를 사용하는 Azure DevOps yaml 템플릿의 여러 요구
관련 질문
- javascript - 각도에서 물체의 값을 변경하는 방법
- arrays - Angular에서 GET 요청을 수행 할 때이 오류가 발생합니다 다른 지원 개체 '[object Object]를 찾을 수 없습니다
- Javascript의 속성에 따라 객체 배열을 필터링하는 방법
- angular - 사용자가 선택한 것만 전달 배열
- javascript - 선택한 자릿값 대신 각 확인란 값을 표시하는 방법
- javascript - 배열의 요소와 비교하여 객체를 필터링하는 방법
- javascript - 모두가 아닌 데이터에서 고유 한 값만 표시하는 방법
- javascript - 다른 배열에서 사용할 수없는 ID를 찾는 방법
- 자바 스크립트 배열이 올바르게 매핑되지 않음
- javascript - 첫 번째 요소를 나머지 요소와 비교하고 두 번째 요소를 나머지 요소 및 동일한 반복과 어떻게 비교할 수 있습니까?
리 내부에 ng-container를 사용하는 것이 좋습니다. 하나의 HTML 요소에 2 * ngFor를 사용할 수 없습니다.
예 :