홈>
항목을 표시하는 다음 코드가 있습니다
<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 - WASM을 Angular 서비스에 올바르게 통합하는 방법
- javascript - Angular 앱에서 CKEditor5 사용자 지정 빌드 사용
- javascript - 주어진 시간 슬롯에 현재 시간이 있는지 확인하고 주어진 날짜 배열 사이에 날짜가 있는지 찾는 방법
- javascript - Ag-Grid 하이라이트 셀 로직이 제대로 작동하지 않음
- javascript - 모두가 아닌 데이터에서 고유 한 값만 표시하는 방법
- javascript - 이 유효성 검사기에서 "정의되지 않은 'http'속성을 읽을 수 없음"이 나타나는 이유는 무엇입니까?
- javascript - 정의되지 않은 Angular/TypeScript의 'forEach'속성을 읽을 수 없습니다
- angular - 현재 input/ngModelChange 이벤트에 반영되지 않는 지시문의 nativeElementValue 변경 사항
- javascript - 배열의 요소와 비교하여 객체를 필터링하는 방법
*ngFor
의 색인을 추적 할 수 있습니다let i = index
를 사용하여 그런 다음*ngIf
를 사용할 수 있습니다 인덱스가 위치 3에있을 때 작업을 수행합니다. 아래를 참조하여<pre></pre>
를 사용했습니다. 무슨item
몰라 때문에 입니다.귀하의 HttpGet이 잘못되었습니다. 새로운
HttpClient
를 사용하고 있다고 가정합니다. 이어야합니다 :오래된
Http
라면 :