ngx-charts-advanced-pie-chart 正在读取我的其余 api 响应为 null

Question

我正在尝试在 ngx-charts-advanced-pie-chart 中注入我的 Rest API 响应，它正在将其读取为 null

这是我的product.component.html

<div class="row">
    <div class="col-lg-6">
        <nb-card>
            <nb-card-header>
                <span>
                    Chercher un produit
                </span>
                <span style="float: right;">
                    <nb-search type="rotate-layout" tag="rotate-layout"></nb-search>
                </span>

            </nb-card-header>
            <nb-card-body>
                <form class="form-inline">
                    <label>Votre résultat de recherche: &nbsp;</label>
                    <h3 [(ngModel)]="product">{{ product }}</h3>
                </form>
                <form class="form-inline">
                    <label> &ensp; Choisissez une année: &nbsp;</label>
                    <nb-select [(ngModel)]="aam" selected="2020" status="warning" id="annee" name="annee">
                        <nb-option value="2020">2020</nb-option>
                        <nb-option value="2019">2019</nb-option>
                        <nb-option value="2018">2018</nb-option>
                        <nb-option value="2017">2017</nb-option>
                        <nb-option value="2016">2016</nb-option>
                        <nb-option value="2015">2015</nb-option>
                        <nb-option value="2014">2014</nb-option>
                        <nb-option value="2013">2013</nb-option>
                        <nb-option value="2012">2012</nb-option>
                        <nb-option value="2011">2011</nb-option>
                        <nb-option value="2010">2010</nb-option>
                        <nb-option value="2009">2009</nb-option>
                        <nb-option value="2008">2008</nb-option>
                        <nb-option value="2007">2007</nb-option>
                        <nb-option value="2006">2006</nb-option>
                        <nb-option value="2005">2005</nb-option>
                        <nb-option value="2004">2004</nb-option>
                        <nb-option value="2003">2003</nb-option>
                        <nb-option value="2002">2002</nb-option>
                        <nb-option value="2001">2001</nb-option>
                        <nb-option value="2000">2000</nb-option>
                    </nb-select>
                    <h3>{{test}}</h3>
                </form>
            </nb-card-body>
        </nb-card>
    </div>

    <div class="col-lg-6">
        <nb-card>
            <nb-card-header>Chiffre d'affaires annuel</nb-card-header>
            <nb-card-body>
                <ngx-charts-advanced-pie-chart [scheme]="colorScheme" [results]="single">
                </ngx-charts-advanced-pie-chart>
            </nb-card-body>
        </nb-card>
    </div>

</div>

<div class="row">
    <nb-reveal-card fullWidh>
        <nb-card-front fullWidh>
            <nb-card accent="success" fullWidh>
                <nb-card-header (click)="getListComProductPeriode()">
                    <span>Traffic</span>
                    <nb-select [(ngModel)]="chhar" [selected]="type" status="info" style="float: right;">
                        <nb-option (click)="getListComProductPeriode()" *ngFor="let period of months" [value]="period">
                            {{ period }}</nb-option>
                    </nb-select>
                </nb-card-header>
                <nb-card-body>
                    <nb-list>
                        <nb-list-item>
                            <form class="form-inline">
                                <div class="col"><span><strong>Produit</strong></span></div>
                                <div class="col"><span><strong>Montant</strong></span></div>
                                <div class="col"><span><strong>Adresse</strong></span></div>
                                <div class="col"><span><strong>Commission</strong></span></div>
                            </form>
                        </nb-list-item>
                        <nb-list-item *ngFor="let com of listComMonth">
                            <form class="form-inline">
                                <div class="col"><span>{{ com.product }}</span></div>
                                <div class="col"><span>{{ com.amount }} DT</span></div>
                                <div class="col"><span>{{ com.address }}</span></div>
                                <div class="col"><span>{{ com.gain }} DT</span></div>
                            </form>
                        </nb-list-item>
                    </nb-list>
                </nb-card-body>
            </nb-card>
        </nb-card-front>
        <nb-card-back>
            <nb-card accent="primary">
                <nb-card-header>Back Card Header</nb-card-header>
                <nb-card-body>
                    A nebula is an interstellar cloud of dust, hydrogen,
                    helium and other ionized gases.
                    Originally, nebula was a name for
                    any diffuse astronomical object,
                    including galaxies beyond the Milky Way.
                </nb-card-body>
            </nb-card>
        </nb-card-back>
    </nb-reveal-card>
</div>

这也是我的product.component.ts

import { Component, OnInit } from '@angular/core';
import { NbThemeService, NbSearchService } from '@nebular/theme';
import { ContratService } from '../../../services/contrat.service';
import { ActivatedRoute, Router } from '@angular/router';
import { Observable } from 'rxjs';

@Component({
  selector: 'ngx-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.scss']
})
export class ProductComponent implements OnInit {

  listComMonth: any;
  product = '';
  types: string[] = ['mois', 'trimestre', 'semestre'];
  months: string[] = ['Janvier', 'Fevrier', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Aout', 'Septembre', 'Octobre', 'Novembre', 'Decembre'];

  aam= '2020';
  chhar= '';

  x: any = 894;
  y: number = 500;

  test: any = 0;

  single = [
    {
      name: 'Semestre 1',
      value: this.x,
    },
    {
      name: 'Semestre 2',
      value: this.test,
    },
    
  ];
  colorScheme: any;
  themeSubscription: any;

  constructor(private theme: NbThemeService,private searchService: NbSearchService,
    private contratService: ContratService,
    private route: ActivatedRoute,
    private router: Router) {
    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
      const colors: any = config.variables;
      this.colorScheme = {
        domain: [colors.primaryLight, colors.warningLight, colors.infoLight, colors.successLight, colors.dangerLight],
      };
    });
    this.searchService.onSearchSubmit()
      .subscribe((data: any) => {
        this.product = data.term;
      })
      
  }

  ngOnInit() {
    this.getListComProductSemestre2();
  }

  getListComProductPeriode(){
    this.contratService.getComListProductPeriode(this.product, this.aam, this.chhar)
    .subscribe(
      data => {
        this.listComMonth = data;
        console.log(data);
      },
      error => {
        console.log(error);
      }
    );
  }

  getListComProductSemestre2(){
    this.contratService.getCAProduct("Lunette", "2020", "Semestre_2")
    .subscribe(
      data => {
        this.test = data;
        console.log(data);
      },
      error => {
        console.log(error);
      }
    );
  }



}

这是我的服务

    getComListProductPeriode(product, year, periode){
    return this.http.get(`${caUrl}/list_com_productt/${product}/${year}/${periode}`);
  }

  getCAProduct(product, year, periode){
    return this.http.get(`${caUrl}/ca_productt/${product}/${year}/${periode}`);
  }

所以基本上这就是我得到的 Result i'm getting 你可以在测试标签中看到 730 但它没有添加到高级饼图中，它仍然读取它为零，即使方法是运行 in ngOnInit()

我不知道为什么它在标签中可以正常工作，但在图表中却不能正常工作

Answer 1

在 Javascript 中，基本类型是按值保存的，而不是按引用保存的。因此，当您在 class 的顶部设置单个数组的初始值时，您将获得以下对象数组：

[
    {
      name: 'Semestre 1',
      value: 894,
    },
    {
      name: 'Semestre 2',
      value: 0,
    }
];

如果你想更新值属性，你必须在数组中找到合适的对象并将它的属性设置为新值。

const obj = single.filter(item => item.name === 'Semestre 2'); // it would be better to use id
obj.value = newValue;

Answer 2

@Maaroufi Aziz，图表更改将在 single 对象引用更改时反映出来。因此，要根据 API 更改重新加载图表，您需要按以下方式更新您的方法，

  getListComProductSemestre2(){
    this.contratService.getCAProduct("Lunette", "2020", "Semestre_2")
    .subscribe(
      data => {
              this.single.find(s=> s.name==='Semestre 2').value = data;
              this.single = [...this.single];
      },
      error => {
        console.log(error);
      }
    );
  }

我已经创建了 sample stackblitz here，这里我使用了 setTimeout 来生成异步场景。

如果您有任何疑问，请告诉我。

ngx-charts-advanced-pie-chart 正在读取我的其余 api 响应为 null

ngx-charts-advanced-pie-chart is reading my rest api response as null

javascript

chart.js

angular

ngx-charts