홈>
항목을 표시하는 다음 코드가 있습니다
<ul>
<li *ngFor="#item of items">{{item}}</li>
</ul>
이제 items 객체는 API에 대한 http 호출의 결과로 얻는 것입니다.
이 코드는 다음과 같습니다.
this.http.get('/api/items').subscribe(data => {
this.items= data['results'];
});
내가 이루고 싶은 것은 세 번째 아이템이 커스텀 아이템이되고 다음 아이템을 정상적으로 렌더링하는 것입니다.
어떻게이 문제를 해결할 수 있습니까?
감사합니다
- 답변 # 1
- 답변 # 2
의견에 따르면 실제로 다음과 같은 것이 필요합니다 :
<ul> <ng-container *ngFor="let item of items; let i = index"> <li>{{item}}</li> <li *ngIf="i === 2">...</li> </ng-container> </ul>
요소 자체가 아닌 컨테이너 위의 루프에 유의하십시오. 따라서 각 단계마다 레이아웃을 어지럽히 지 않고 다양한 요소를 가질 수 있습니다.
- 답변 # 3
<ul> <li *ngFor="#item of items; let i = index" [attr.data-index]="i""> <span *ngIf="i == 2"> this is third element {{item}} <span> <span *ngIf="i != 2"> {{item}} <span> </li> </ul>
관련 자료
- vector - C ++ 배열에서 연속 된 두 요소 사이에 곱과 합계를 삽입해야합니다 작동하지 않는 이유와 작동하도록하려면 어떻게해야합니까?
- regular expression - Vim에서 다른 두 문자 사이에 문자 삽입
- python - 항목 위젯 tkinter의 각 색인 사이에 공백없이 목록을 삽입하십시오
- c# - 시작일과 종료일 사이의 모든 날짜를 표에 삽입하려면 어떻게해야합니까?
- sql - 존재하지 않는 인서트와 인서트의 성능 차이
- sql - 다른 테이블의 두 특정 값 사이에 결 측값을 삽입 한 다음 다른 열의 값을 복사하는 방법
- 자바 스크립트에서 정규 표현식을 사용하여 숫자와 문자/문자열 사이에 공백을 삽입하는 방법
- python - sed를 사용하여 같은 필드의 두 문자 사이에 공백을 삽입하십시오
- sql - 여러 열에 대한 SELECT와 INSERT 간의 경쟁 조건
- sql - 문자열 사이에 쉼표를 삽입하는 방법
관련 질문
- JavaScript: 하나의 이미지에서 여러 자르기 선택?
- javascript : Angular 11 자식 구성 요소를 사용하여 기본 구성 요소에서 양식을 확장하는 방법
- javascript : Angular Reactive Forms 교차 속성 유효성 검사기에 대한 올바른 유형을 선언하시겠습니까?
- javascript : WYSIWYG Editor가 업데이트를 등록하지 않습니다
- javascript : 잡히지 않은 오류: MatAutocomplete 유형에 'ɵmod' 속성이 없습니다.
- javascript : 복잡한 프로젝트를 Angular 1.5에서 2로 마이그레이션하는 방법은 무엇입니까?
- javascript : 각도의 특정 값으로 개체를 정렬하는 방법은 무엇입니까?
- javascript : 비활성화 전 24시간 제한
- javascript : 중첩 다중 루프
- javascript : Angular에서 입력 클릭 이벤트를 기반으로 페이지 위로 이동
*ngFor
의 색인을 추적 할 수 있습니다let i = index
를 사용하여 그런 다음*ngIf
를 사용할 수 있습니다 인덱스가 위치 3에있을 때 작업을 수행합니다. 아래를 참조하여<pre></pre>
를 사용했습니다. 무슨item
몰라 때문에 입니다.귀하의 HttpGet이 잘못되었습니다. 새로운
HttpClient
를 사용하고 있다고 가정합니다. 이어야합니다 :오래된
Http
라면 :