Question

我在这里检查了所有其他帖子，并发现了类似的问题，但找不到合适的解决方案。

我去了Angular Docs来关注这篇帖子https://angular.io/tutorial/toh-pt4，尽管我按照那里的描述进行了操作，但遇到了错误TypeError: Cannot read property 'subscribe' of undefined

posts.service.ts

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
var Prismic = require('prismic-javascript');

const apiEndpoint = "https://hehypfgdgees3124312424heetyh.edn.prismic.io/api/v2"

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

  constructor() { }

  getPosts(): Observable<[]> {
    Prismic.getApi(apiEndpoint).then(api => {
      return of(api.query(""));
    })

    return
  }
}

和我的组件Landingpage.component.ts

import { Component, OnInit } from '@angular/core';
import { PostPreview } from '../../types/PostPreview';
import { PostsService } from '../../services/posts.service';
import { Observable } from 'rxjs'

@Component({
  selector: 'app-landingpage',
  templateUrl: './landingpage.component.html',
  styleUrls: ['./landingpage.component.scss']
})
export class LandingpageComponent implements OnInit {
examplePreview: PostPreview
exampleNewsfeed: Array<{}>

  constructor(private postService: PostsService) { }

  ngOnInit() {
    this.examplePreview = {
      titel: 'Hello',
      subtitel: 'Subtitel',
      backgroundImageUrl: 'https://www.welt.de/img/politik/deutschland/mobile191563833/0437936357-coriginal-w780/Forderungen-von-Fridays-For-Future-vorgestellt-3.jpg',
      abgedunkelt: true
    };

    this.postService.getPosts().subscribe(posts => this.exampleNewsfeed = posts);
  }

}

我的目标是在订阅功能时将API调用的结果带入我的组件中。预先感谢。

Answer 1

在您的服务中，只有<f7-list-input placeholder="Username" type="text" :value="name" @input="onPersist"/> export default { mounted() { if (localStorage.name) { // 'name' is a computed property without a setter // hence, below line in your code doesn't reflect change // // this.name = localStorage.getItem('name'); // // instead you should commit the value to the store // and let vuex take care of everything const existingName = localStorage.getItem('name'); this.$store.commit('persist', existingName); } }, computed:{ name(){ return this.$store.state.name; } }, methods:{ onPersist(){ this.$store.commit('persist',event.target.value); } } };条语句没有任何值，因此它将是return，因此创建一个Observable并返回。

undefined

Answer 2

这是因为返回了getPosts结果之前的returns方法then。

getPosts(): Observable<[]> {
  Prismic.getApi(apiEndpoint).then(api => {
    return of(api.query(""));
  })

  return // <-- This
}

因为看起来getApi方法的结果是一个承诺，所以一种方法是等待结果（大致如此）：

async getPosts(): Observable<[]> {
  const api: YourType = await Prismic.getApi(apiEndpoint);

  // if your api.query method returns an Observable already
  return api.query("");
  // -- OR --
  // Your 'of' return
  return of(api.query(""));
}

Answer 3

您可能来自Vue / React背景，除非您的开发团队选择安装RxJS，否则通常会使用Promise而不是可观察的东西。

对于Angular而言，在处理异步操作时，可观察变量用于代替promises，这是标准做法。因此，使用了RxJS。

对于您的情况，我们应该使用RxJS的from将诺言转换为可观察的。

for i in list1:
    for i2 in list2:
        if i[0][0] != i2[0][0]
            list3.append(i2)

然后在component.ts上，使用import { from } from 'rxjs'; . . getPosts(): Observable<[]> { const observable = from(Prismic.getApi(apiEndpoint)); return observable; }返回可观察的值

subscribe()

调用服务功能时未定义“订阅”

3 个答案: