Question

我想列出一些我在服务中已有的对象，但是在加载localhost时它们不会出现。以下是代码：

item.model.ts

export class Item {
  status: string = 'started';
  constructor(public title: string = ''){}
}

app.component.ts

import { Component, Inject } from '@angular/core';

import { Item }   from './app.model';
import { AppService }from './app.service';

@Component({
  selector: 'app-root',
  template: `
   <div>
     <form (submit)="onSubmit()">
       <input type="text" [(ngModel)]="item.title" name="title">
     </form>
     <app-list></app-list>
   </div>
  `
})

export class AppComponent{
 item: Item = new Item();

 constructor(public appService: AppService){
 }

 onSubmit(){
  this.appService.todos.push(this.item);
  console.log('return: ' + this.appService.todos);
  this.item = new Item();
 }

}

APP-list.component.ts

在这个组件中，我试图列出你在HTML中看到的itens。

import { Component, OnInit } from '@angular/core';
import { AppService }from './app.service';

import { Item } from './app.model';

@Component({
  selector: 'app-list',
  template: 
  `
 <div>
  <ul>
   <li *ngFor="let todo of todos">
    <span>{{todo.title}}</span>
   </li>
  </ul>
  </div>
  `
})

export class AppList implements OnInit {
 todo: Item[];

 constructor(private appService: AppService){}

 ngOnInit(): void {
  let todos = this.appService.todos;
  console.log('todos: ' + todos);
 }

}

app.service.ts

import { Injectable } from '@angular/core';
import { Item }       from './app.model';

@Injectable()
export class AppService {
    todos = [
        {'id' : 1, 'description': "test item 1"},
        {'id' : 2, 'description': "test item 2"}
    ];
}

当我添加一个新项目时，我什么都没有，但控制台显示：

todos: [object Object],[object Object],[object Object]

Answer 1

感谢@BarbarBilal，我发现了错误，我在这里发帖给大家看看。一切都按照我的意愿运作。

首先，模型：

export class Item {
 constructor(public title: string = ''){}
}

然后，AppComponent：

import { Component, Inject } from '@angular/core';

import { Item }   from './app.model';
import { AppService }from './app.service';

@Component({
  selector: 'app-root',
  template: `
   <div>
  <form (submit)="onSubmit()">
   <input type="text" [(ngModel)]="item.title" name="title">
  </form>
  <app-list></app-list>
 </div>
  `
})

export class AppComponent{

 item: Item = new Item();

 constructor(public appService: AppService){
 }

 onSubmit(){
  this.appService.todos.push(this.item);
  console.log('return: ' + this.appService.todos[0].title);
  this.item = new Item();
 }

}

AppList：

import { Component, OnInit } from '@angular/core';
import { AppService }from './app.service';

import { Item } from './app.model';

@Component({
  selector: 'app-list',
  template: 
  `
 <div>
  <ul>
   <li *ngFor="let todo of todos">
    {{todo.title}}
   </li>
  </ul>
  </div>
  `
})

export class AppList implements OnInit{

 todos: Item[];

 constructor(private appService: AppService){}

 ngOnInit(): void {
  this.todos = this.appService.todos;
  console.log('todos: ' + this.todos[0].title);
 }
}

最后，AppService：

import { Injectable } from '@angular/core';
import { Item }       from './app.model';

@Injectable()
export class AppService {

    todos = [
        {title : 'test item 1'}
    ];

}

如您所见，AppService现在具有 todos 并具有 title 属性。应用列表组件现在有 todos 。我在AppList组件中创建 todos 变量global。

如何列出模板中的对象？

1 个答案: