Question

我是Angular 6的新手，我正在尝试遍历对象数组，但是却什么也没有产生。网上的人们正在谈论订阅可观察者，如果这是问题，我不知道该怎么办。

这是我的组件：

import { Component, OnInit } from '@angular/core';
import { Topic } from '../topic';
import { TopicFetcherService } from '../topic-fetcher.service'

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

  constructor( private topicFetcher: TopicFetcherService) { }

  topics: Topic[];

  ngOnInit() { 

    // this grabs my topics from my http service
    this.processTopics(this.topicFetcher.getData()); 

  }

  processTopics(rawTopics: Topic[]) {

    console.log(rawTopics); // this works 

    rawTopics.forEach(topic => {
      console.log(topic.id); // this does not work ? 
    });

  }

}

我不明白为什么console.log（rawTopics）可以工作，但是如果您尝试对其进行迭代，则必须参与可观察对象。这似乎有点费力。

编辑：

这是我的主题提取程序服务。当前，它只是资产中的.json文件：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { Topic } from './topic';

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

  constructor(private http: HttpClient) { }

  topics: Topic[];

  getData(): Topic[] {

    this.topics = [];
    let index = 1;

    this.http.get('assets/topics.json')
    .subscribe(data => {     
      for (const key in data) {
        let topic = new Topic();
        topic.id = index;
        topic.title = data[key].topic;
        topic.description = data[key].narrative;
        topic.type = data[key].type;
        topic.dataset = data[key].dataset;
        this.topics.push(topic);
        index++;
      }
     });

     return this.topics;

  }

}

Answer 1

如果Ticker = Sheets("Sheet1").Cells(TopRow - 1, col - 3).Value返回类型为getData()的可观察对象，则需要订阅（并取消订阅）。首先导入Observable

Observable<Topic[]>

以及您的组件类

import { Observable } from 'rxjs'

在末尾用ngOnInit() { this.processTopics(this.topicFetcher.getData()); } processTopics(rawTopics$: Ovservable<Topic[]>) { rawTopics$.subscribe((rawTopics) => { console.log(rawTopics); // this works rawTopics.forEach(topic => { console.log(topic.id); // this does not work ? }); }); }标记可观察对象是一种好习惯，但这主要是基于观点。

退订

要取消订阅，有必要引入$组件生命周期钩子并在其中取消订阅。

OnDestroy

将一个成员添加到您的组件类中，例如名为import { OnDestroy } from '@angular/core'; import { Subscription } from 'rxjs';。然后将subscription: Subscription中的订阅分配给该变量。

processTopics

告诉组件类以实现ondestroy生命周期挂钩。

this.subscription = rawTopics$.subscribe(...)

最后创建钩子函数

export class TopicsComponent implements OnInit, OnDestroy {}

编辑

将服务更改为以下代码段（当然，具有所有对象属性，而不是...）。不要订阅服务本身，而是返回ngOnDestory() { if (this.subscription) { this.subscription.unsubscribe(); } }作为可观察的内容并订阅您的组件。

http.get

getData(): Observable<Topic[]> { return this.http.get<Topic[]>('assets/topics.json').pipe( map(data => { data.map((entry, index) => { const topic = { id: index, title: entry.topic ... } return topic; }); }) ); }的优点还在于，当可观察对象接收到值时，它们也将完成，这意味着您不必取消订阅。但是，当您收到过多不需要的订阅时，它确实可以使应用程序出现性能问题。

无法在Angular 6中遍历对象的本地数组？

1 个答案: