[英]How to pass an object from a service to a component in Angular8?
I have a problem i want to pass an object list from a service to a component.我有一个问题,我想将 object 列表从服务传递给组件。 the response is undefined.
响应未定义。
This is the data-service.service :
这是data-service.service :
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;
}
}
This is the ts of component view-item.component.ts
这是组件view-item.component.ts的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);
}
}
for now I need only the console.log of the object.现在我只需要 object 的 console.log。
Thanks!谢谢!
There are a bunch of syntax errors in your code.您的代码中有一堆语法错误。
1) You aren't assigning anything to data
in your service. 1)您没有为服务中的
data
分配任何内容。
2) The keys/properties should be separated by comma, not semicolon. 2) 键/属性应该用逗号分隔,而不是分号。
This should fix it.这应该解决它。
On your data-service.service.ts,在您的 data-service.service.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;
}
}
And on your component.ts, you should assign the values returned by the loadAll()
method from your service into a variable or property in your component.在您的 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);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.