如何将对象从服务传递到Angular8中的组件

Question

我有一个问题，我想将对象列表从服务传递到组件。响应未定义。

这是数据服务。服务:

import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root',
})
export class DataService {
public data: {
"first": [
{
list: 'first';
id: 1;
title: 'First list title item';
description?: 'Example description for first list title item';
completed: false;
}
],
"second": [
{
list: 'second'
id: 2;
title: 'Second list title item';
description?: 'Example description for second list title item';
completed: false;
}
],
"third": [
{
list: 'third'
id: 2;
title: 'Third list title item';
description?: 'Example description for third list title item';
completed: false;
}
],
};
loadAll(){
return this.data;
}
}

这是组件视图项的ts。component.ts

import { Component, OnInit } from '@angular/core';
import { DataService } from '../service/data-service.service';
@Component({
selector: 'app-todo-item',
templateUrl: './view-item.component.html',
styleUrls: ['./view-item.component.scss'],
})
export class ViewItemComponent implements OnInit {
todos: {};
constructor(private dataService: DataService) {}
ngOnInit() {
this.todos = this.dataService;
this.dataService.loadAll();
console.log(this.dataService.data);
}
}

现在我只需要对象的console.log。

谢谢！

Answer 1

您的代码中有很多语法错误。

1( 您没有为服务中的data分配任何内容。

2( 键/属性应该用逗号分隔，而不是用分号分隔。

这应该能解决问题。

在您的数据服务上。services.ts，

@Injectable()
export class DataService {
public data = {
"first": [
{
list: 'first',
id: 1,
title: 'First list title item',
description: 'Example description for first list title item',
completed: false,
}
],
"second": [
{
list: 'second',
id: 2,
title: 'Second list title item',
description: 'Example description for second list title item',
completed: false,
}
],
"third": [
{
list: 'third',
id: 2,
title: 'Third list title item',
description: 'Example description for third list title item',
completed: false,
}
],
};
loadAll(){
return this.data;
}
}

在component.ts上，应该将loadAll()方法从服务返回的值分配到组件中的变量或属性中。

import { Component, OnInit } from '@angular/core';
import { DataService } from '../service/data-service.service';
@Component({
selector: 'app-todo-item',
templateUrl: './view-item.component.html',
styleUrls: ['./view-item.component.scss'],
})
export class ViewItemComponent implements OnInit {
todos;
constructor(private dataService: DataService) {}
ngOnInit() {
this.todos = this.dataService.loadAll();
console.log(this.todos);
}
}

我在这里复制了一个演示。