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

如何解决我无法在角度组件中显示服务响应

我尝试在服务的角度组件中显示数据，从服务到组件的所有过程都可以，但是当我在 html 中使用变量时，它不显示结果。

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

"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>

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

,

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

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

,

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

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

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

2. 在分配值之前初始化数据。必须在构造函数或 ngOnInit 中完成

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

另外，你分配了订阅 this.data，不要那样做。您希望在完成后处理您的订阅，否则随着时间的推移，您可能会出现内存泄漏。

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