Question

我正在尝试从组件中的服务类检索待办事项列表。但这行不通。请在下面找到代码：

todos.service.ts

import { Injectable } from '@angular/core';
import { Todos } from '../models/Todos';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, of, BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class TodosService {

  todos: Todos[];

  httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
  }

  private todoSource = new BehaviorSubject<Todos>({ id: null, text: null, completed: null });
  selectedTodo = this.todoSource.asObservable();

  constructor(private http: HttpClient) {
    this.http.get<Todos[]>('http://localhost:8888/api/todos').subscribe((todos) => {
      this.todos = todos;
    });
  }

  getTodos(): Observable<Todos[]> {
    return of(this.todos);
  }

  addTodo(todo): Observable<Todos> {
    return this.http.post<Todos>('http://localhost:8888/api/todos', todo, this.httpOptions);
  }

  setTodo(todo: Todos) {
    this.todoSource.next(todo);
  }
}

todoslist.component.ts

import { Component, OnInit } from '@angular/core';
import { Todos } from '../../models/Todos';
import { TodosService } from '../../services/todos.service';

@Component({
  selector: 'app-todolist',
  templateUrl: './todolist.component.html',
  styleUrls: ['./todolist.component.css']
})
export class TodolistComponent implements OnInit {

  todos: Todos[];
  constructor(private _todosService: TodosService) {
  }

  ngOnInit() {
    this._todosService.getTodos().subscribe(todos => {
      console.log('getting todos', todos);
      this.todos = todos;
    });
  }

  onSelect(todo: Todos) {
    this._todosService.setTodo(todo);
  }
}

组件的ngOnInit方法调用服务的getTodos（）方法。但是在控制台日志记录中，待办事项似乎未定义。我在这里做什么错了？

谢谢

Answer 1

理想情况下，ajax应该由git clone the-repo方法本身制成。在public GridViewAdapter(Context context, ArrayList<String> images){ //Getting all the values this.context = context; this.images = images; } public View getView(int position, View convertView, ViewGroup parent) { //Creating a linear layout LinearLayout linearLayout = new LinearLayout(context); linearLayout.setOrientation(LinearLayout.VERTICAL); //NetworkImageView NetworkImageView networkImageView = new NetworkImageView(context); //Initializing ImageLoader imageLoader = CustomVolleyRequest.getInstance(context).getImageLoader(); imageLoader.get(images.get(position), ImageLoader.getImageListener(networkImageView, R.mipmap.ic_launcher, android.R.drawable.ic_dialog_alert)); //Setting the image url to load networkImageView.setImageUrl(images.get(position),imageLoader); //Scaling the imageview networkImageView.setScaleType(ImageView.ScaleType.CENTER_CROP); WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE); Display display = wm.getDefaultDisplay(); Point size = new Point(); display.getSize(size); int width = (display.getWidth()/2)-6; networkImageView.setLayoutParams(new GridView.LayoutParams((int)width,640)); //Adding views to the layout linearLayout.addView(networkImageView); //Returnint the layout return linearLayout; }内部进行呼叫无法确保首先提供数据。这就是异步的工作方式。可以简单地返回如下。

getTodos

Answer 2

您似乎正在尝试缓存HTTP响应，以便在第二次调用getTodos（）方法时不会发出第二个HTTP请求。

如果我错了，那么@Pankaj Parkar是正确的。

如果我是对的，那么您想改为这样做：

getTodos(): Observable<Todos[]> {
  return (this.todos) ? of(this.todos) : 
    this.http.get<Todos[]>('http://localhost:8888/api/todos')
      .pipe( tap(todos => this.todos = todos) )
}

angular6 RxJs观测值问题

2 个答案: