使用 angular 中的服务文件将对象从一个组件传递到另一个组件

Question

我正在尝试使用 Kendo UI 和 angular 绘制堆积条形图。我想使用服务文件将数据从主组件传递到堆叠条形图组件。 Home 组件控制台正确显示数据集，但堆积条形图组件未获取数据作为输入。

首页component.ts

import { Component } from '@angular/core';
import { HomeService } from './home.service';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
})
export class HomeComponent {
  homeData: any = [];
  stackedbarchartdata: any = [];
  constructor(private Data: HomeService) {
    this.Data.getMethod().subscribe((res: any) => {
      this.homeData = res;
      this.stackedbarchartdata = this.homeData.stackedbarchartdata;
      console.log(this.stackedbarchartdata);
    })
  }
  ngOnInit() {}
}

家component.html

<kendo-tilelayout-item [col]="3" [colSpan]="2">
  <kendo-tilelayout-item-body>
    <app-stacked-bar-chart [stackedbarchartdata]="stackedbarchartdata"></app-stacked-bar-chart>
  </kendo-tilelayout-item-body>
</kendo-tilelayout-item>

堆积条形图。component.ts

import { Input } from '@angular/core';
import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-stacked-bar-chart',
  templateUrl: './stacked-bar-chart.component.html',
  styleUrls: ['./stacked-bar-chart.component.css']
})
export class StackedBarChartComponent implements OnInit {
  @Input() stackedbarchartdata: any;
  ngOnInit() {
    console.log(this.stackedbarchartdata);
    }
}

Json数据

"singleBaChartData": {
    "name": "singleBaChartData-TOTAL REVENUE",
    "Title": "TOTAL REVENUE",
    "singleBaChartData": [{ "id": 1,"category": "product1","value": 5},
      { "id": 2,"category": "product2","value": 4}]}

Answer 1

我不熟悉 Kendo TileLayout，根据您的评论，我只能假设 kendo-tilelayout-item 的变更检测没有检测到 [=14] 的变更=] 属性。有多种选择可以尝试

1。使用 `async` 管道

您可以删除组件控制器中的订阅并改用模板中的 async 管道。这应该从模板触发订阅，将数据提供给 @Input() 变量。

import { Component } from '@angular/core';
import { HomeService } from './home.service';
import { Observable } from 'rxjs';
import { map, tap } from 'rxjs/operators';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
})
export class HomeComponent {
  homeData: any = [];
  stackedbarchartdata$: Observable<any>;

  constructor(private Data: HomeService) {
  }

  ngOnInit() {
    this.stackedbarchartdata$ = this.Data.getMethod().pipe(
      tap((res: any) => this.homeData = res),       // <-- is this needed anymore?
      map((res: any) => res.stackedbarchartdata)
    );
  }
}

<kendo-tilelayout-item [col]="3" [colSpan]="2">
  <kendo-tilelayout-item-body>
    <app-stacked-bar-chart [stackedbarchartdata]="stackedbarchartdata$ | async"></app-stacked-bar-chart>
  </kendo-tilelayout-item-body>
</kendo-tilelayout-item>

2。手动触发变化检测

在订阅回调之后属性 stackedbarchartdata 被赋值后手动触发变化检测。虽然我觉得有点不雅

使用 angular 中的服务文件将对象从一个组件传递到另一个组件

passing object from one component to another using service file in angular

service

components

inject

stacked-chart

angular

1。使用 `async` 管道

2。手动触发变化检测

使用 angular 中的服务文件将对象从一个组件传递到另一个组件

passing object from one component to another using service file in angular

service

components

inject

stacked-chart

angular

1。使用 async 管道

2。手动触发变化检测

1。使用 `async` 管道