Question

users.component.ts

 import { Component, OnInit, ViewChild } from "@angular/core";
    import { User } from "../../models/User";
    import { DataService } from '../../services/data.service';

    @Component({
      selector: "app-users",
      templateUrl: "./users.component.html",
      styleUrls: ["./users.component.css"]
    })
    export class UsersComponent implements OnInit {
      user : User = {
        firstName : '',
        lastName : '',
        email : ''
      }
      users: User[];
      loaded : boolean = false;
      showExtended : boolean = true
      enableAdd :boolean = false;
      showUserForm : boolean = false;
      @ViewChild('userForm', {static : false}) form : any;
      data : any;


      constructor(private dataService : DataService) {}

      ngOnInit() {

        this.dataService.getData().subscripe(data => {
          console.log(data)
        })

        this.users = this.dataService.getUsers();

          this.loaded = true;

      }

      onSubmit({value, valid}){
        if (!valid) {
          console.log("Form is not valid");
        }else{

          console.log(value)
          value.isActive = true;
          value.registered = new Date;
          value.hide = true;

          this.dataService.addUser(value);

          this.form.reset();
        }
      }

    }

............................................... ................................................... ........

data.service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';

import { User } from '../models/User';


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

  users : User[];
  data : Observable <any>;

  constructor() { 

    this.users = [
      {
        firstName: "john",
        lastName: "Doe",
        email : "john@gmail.com",
        isActive : true,
        registered : new Date('01/02/2018 08:30:00'),
        hide : true
      },
      {
        firstName: "jane",
        lastName: "Doe",
        email : "jane@gmail.com",
        isActive : false,
        registered : new Date('01/02/2018 08:30:00'),
        hide : false
      },
      {
        firstName: "johnny",
        lastName: "Doe",
        email : "jhonny@gmail.com",
        isActive : true,
        registered : new Date('01/02/2018 08:30:00'),
        hide : true

      }
    ];

  }

  getData() {
    this.data = new Observable (observer => {
      setTimeout(()=>{
        observer.next(1);
      },1000)
      setTimeout(()=>{
        observer.next(2);
      },1000)
      setTimeout(()=>{
        observer.next(3);
      },1000)
      setTimeout(()=>{
        observer.next(4);
      },1000)
    });


  }

  getUsers () : User[]{
    return this.users;
  }

  addUser(user : User){
    this.users.unshift(user);
  }

}

............................................... ................................................... *这给了我这个错误：

src / app / components / users / users.component.ts：29：32中的错误-错误TS2339：类型'void'上不存在属性'subscripe'

问题似乎出在this.dataService.getData（）。subscripe（）
我将不胜感激*

............................................... ................................................... ........

Answer 1

GetData（）是一种初始化可观察对象的方法，永远不会返回它，因此您无法订阅可观察对象的调用getData（）

Answer 2

因为您的getData不返回任何东西。请在getData

下添加return语句

返回this.data;

希望有帮助。

Answer 3

getData（）不返回可观察到的订阅，这将起作用。

getData() {
    return new Observable (observer => {
        setTimeout(() => {
            observer.next(1);
          },1000)
        setTimeout(()=>{
            observer.next(2);
        },1000)
        setTimeout(()=>{
            observer.next(3);
        },1000)
        setTimeout(()=>{
            observer.next(4);
        },1000)
      });
    }

在设置this.data及其公众时，可以在调用getData（）之前订阅该内容，但我建议getData（）最好返回您的可观察值。

关闭主题

如果要发出超时信号，最好使用timer运算符。

可观察角度的订阅

3 个答案: