如何将获取的API的一部分添加到component中定义的数组中

Question

为了学习，我正在尝试使用 Angular 2 + Django Rest Framework 创建一个简单的 Todo 应用程序。
为了立即显示输入表单中保存的项目，我想实现获取最新的并显示的功能。

JSON format WEB API获取最新的有如下结构。

获取此 API 的函数在 todo.service.ts

中有描述

@Injectable()
export class TodoService {
  todo: Todo[] = [];
  newtodo: NewTodo[] = [];
  private Url = `http://127.0.0.1:8000/api/todo/`
  private headers = new Headers({'Content-Type': 'application/json'});

  constructor(
    private http: Http
  ){}

  // Acquire one latest todo added
  getNewTodo(): Promise<NewTodo[]> {
    return this.http
      .get(this.Url+"?limit=1")
      .toPromise()
      .then(res => res.json())
      .catch(this.handleError)
  }

组件在 todo.component.ts

中描述

@Component({
  selector: 'todo-list',
  templateUrl: '../templates/todo-list.component.html',
  styleUrls: ['../static/todo-list.component.css']
})
export class TodoListComponent {
  todos: Todo[] = [];
  newtodo: NewTodo[] = [];
  newtodos: Todo[] = [];
  @Input() todo: Todo = new Todo();

  save(): void {
    this.todoService
      .create(this.todo);
  }
}

我要传授的重点是以下几点
1.Execute服务的getNewTodo()在执行组件的save()时将得到的return值存入数组newtodo.
2.Since获取的JSON只需要results部分，拉出results部分，push到数组newtodos传给html.

对于1，我觉得你应该在save()中写下如下描述

this.todoService
  .getNewTodo()
  .then(newtodo => this.newtodo = newtodo);

我看不懂要写什么 2. 我想告诉你如何解决它。

Answer 1

您可以进入JSON并通过以下方式获取results的内容：

getNewTodo(): Promise<NewTodo[]> {
  return this.http
    .get(this.Url+"?limit=1")
    .toPromise()
    .then(res => res.json().results) // here
    .catch(this.handleError)
}

你不是展示在服务中使用create-method，而是不管它是什么样子，return一个promise，这样我们在组件里面可以回调调用getNewTodo:

save() {
  this.todoService
    .create(this.todo)
    .then(data => {
       this.getNewTodo(); // here
    })
}

和在服务中调用方法的getNewTodo：

getNewTodo() {
  this.todoService
    .getNewTodo()
    .then(newtodo => {
      this.newtodo = newtodo
    });
}

如何将获取的API的一部分添加到component中定义的数组中

How to add a part of the acquired API to the array defined in component

javascript

angular2-services

angular2-components

angular