我无法在 angular 组件中显示服务响应

Question

我尝试在服务的 angular 组件中显示数据，从服务到组件的所有过程都正常，但是当我在 html 中使用变量时它不显示结果.

我使用了这个 Metronic 模板：https://preview.keenthemes.com/metronic/angular/demo1/ Metronic 版本：

"name": "metronic-angular-demo1",
"version": "7.1.0",

Angular版本：

"@angular/cli": "~10.0.4",

我有以下 angular 组件：

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>

Answer 1

在父标签中添加 *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>

如果这不起作用，请告诉我。

Answer 2

正在尝试使用不同的变量来存储订阅。这可能与此冲突。

data = [];
sub : any;
ngOnInit(): void {
    this.sub= this.service.getPointConfig().subscribe((result: GeneralResult) => {
      this.data = [...result.data];
    });
  }

Answer 3

之所以回复，是因为其他人可能会像我一样遇到这个问题。我猜 OP 确实修复了他们的错误。

我使用过与 OP 完全相同的 metronic 服务。数据未初始化，这意味着 angular 将在渲染模板时抛出错误。 2 个简单的修复，Piyush 在他们的回答中给出了一个。

使用 NgIf，它将观察数据直到收到数据，然后渲染组件。添加此标签将修复错误

<div *ngIf="data">

在赋值之前初始化数据。必须在构造函数或 ngOnInit

this.data = { codePoint : "", namePoint : "", quantityPoint :"" }

此外，您已将订阅分配给 this.data，请不要这样做。你想在完成后处理你的订阅，否则你可能会随着时间的推移发生内存泄漏。

因为我提到了内存泄漏，所以在严格基于性能的指标上初始化数据比使用 NgIf 更可取。

我无法在 angular 组件中显示服务响应

I can´t show service response in angular component

html

javascript

typescript

metronic

angular