서비스의 각도 구성 요소에 데이터를 표시하려고 시도했지만 서비스에서 구성 요소까지의 모든 프로세스는 정상이지만 html에서 변수를 사용하면 결과가 표시되지 않습니다.
이 Metronic 템플릿을 사용했습니다 : https://preview.keenthemes.com/metronic/angular/demo1/ Metronic 버전 :
"name": "metronic-angular-demo1",
"version": "7.1.0",
각도 버전 :
"@angular/cli": "~10.0.4",
다음과 같은 각도 구성 요소가 있습니다.
import { Component, OnInit } from '@angular/core';
import { GeneralResult } from 'src/app/models/general/general.model';
import { PointsService } from 'src/app/services/points/points.service';
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {
data: any;
constructor(private service: PointsService) {
}
ngOnInit(): void {
this.data = this.service.getPointConfig().subscribe((result: GeneralResult) => {
this.data = result.data;
});
}
}이것은 서비스입니다
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { GeneralResult, ResultModel } from 'src/app/models/general/general.model';
import * as env from 'src/environments/environment';
@Injectable({
providedIn: 'root'
})
export class PointsService {
constructor(private http: HttpClient) { }
getPointConfig(): Observable<GeneralResult> {
return this.http.post<GeneralResult>(env.serviceRoute.GET_POINTS_CONFIG, null);
}
}이것은 HTML 구성 요소입니다.
<div *ngFor="let item of data; let i of index" class="row row-container-item-list">
<div class="col-3">
{{ item.codePoint }}
</div>
<div class="col-3">
{{ item.namePoint }}
</div>
<div class="col-3">
{{ item.quantityPoint }}
</div>
</div>*ngIf="data"부모 태그에 추가하십시오 . 이렇게 해보세요.
<div *ngIf="data">
<div *ngFor="let item of data; let i of index" class="row row-container-item-list">
<div class="col-3">
{{ item.codePoint }}
</div>
<div class="col-3">
{{ item.namePoint }}
</div>
<div class="col-3">
{{ item.quantityPoint }}
</div>
</div>
</div>
또는
<ng-template [ngIf]="data">
<div *ngFor="let item of data; let i of index" class="row row-container-item-list">
<div class="col-3">
{{ item.codePoint }}
</div>
<div class="col-3">
{{ item.namePoint }}
</div>
<div class="col-3">
{{ item.quantityPoint }}
</div>
</div>
</ng-template>
이것이 작동하지 않으면 알려주십시오.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다