标签: rxjs6

为什么这不起作用？

import { forkJoin } from 'rxjs';
import { ActivatedRoute } from '@angular/router';

constructor(
  private route: ActivatedRoute
) {}

ngOnInit(): void {

  let parent = this.route.parent.params;
  let child = this.route.params;

  forkJoin(
     parent,
     child,
     (p, c) => {
        console.log(p);
        console.log(c);
     }
  )
}

仅供参考（rxjs6）

我正在尝试创建一个搜索服务，用于在输入中进行实时搜索。我有 search.service.ts：

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

import { Observable } from 'rxjs';
import { map, debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';

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

  baseUrl: string = 'https://api.cdnjs.com/libraries';
  queryUrl: string = '?search=';

  constructor(private http: Http) { }

  search(terms: Observable<string>) {
    return terms.pipe(debounceTime(400)
      .distinctUntilChanged()
      .switchMap(term => this.searchEntries(term)));
  }

  searchEntries(term) {
    this.http.get(this.baseUrl + this.queryUrl + term).pipe(map(res => {
      res.json();
    }))
  }
}

和 app.component.ts：

import { Component …

最近，我一直在尝试在 React 应用程序中使用 rxjs 提取 API 请求，这是我提出的解决方案。

您对此有何看法？

有什么我应该遵循的良好做法吗？

如果有什么好的解决方案请告诉我。

import axios from 'axios';
import { Observable } from 'rxjs';

import './App.css';

export class App extends Component {
  state = {
    users: []
  };
  componentDidMount() {
    const fetchUserSubscription$ = this.fetchUsersObservables();

    fetchUserSubscription$.subscribe(data =>
      this.setState({
        users: data
      })
    );
  }

  fetchUsers = async () => {
    const response = await axios.get(
      'https://jsonplaceholder.typicode.com/users'
    );
    const data = response.data;
    this.setState({ users: data });
  };

  fetchUsersObservables = () =>
    new Observable(observer => {
      axios
        .get('https://jsonplaceholder.typicode.com/users') …

我正在使用 Rxjs 和 Angular Framework 开发一个前端项目，我想从 api“api/data_processor_classlib.php....”获取 json 数据。HTML 中通过 this.webProtectionHTML$ 订阅了三个部分。我不知道为什么管道 this.webProtectionHTML$ 发出了 3 次请求。有没有一种可能的解决方案，只需发送一个请求并更新 HTML 中的所有数据？谢谢。

HTML 代码：

    <div class="tr">
      <div class="align-left">Phishing & Other Frauds</div>
      <div class="align-right">{{ (webProtectionHTML$|async)?.phishing}}</div>
    </div>
    <div class="tr">
      <div class="align-left">Spam URLs</div>
      <div class="align-right">{{ (webProtectionHTML$|async)?.spamURLs}}</div>
    </div>
    <div class="tr">
      <div class="align-left">Malware Sites</div>
      <div class="align-right">{{ (webProtectionHTML$|async)?.malware}}</div>
    </div>

成分：

this.webProtectionHTML$ = this.dayService$
      .pipe(
        mergeMap((days: DaysPeriod // params added to request url) => this.httpClient.get(`api/data_processor_classlib.php....`//request url, { responseType: 'text' })),
        map((html: string) => {
          //get html code and find data return …

我有一个带有 RXJS 主题的服务，并且我正在将数据分配给构造函数内的主题进行 api 调用。我在组件模板中订阅了该主题。尽管数据已提供给受试者，但它不会在第一次时立即发射。

interface Employee {
  employee_age: number;
  employee_name: string;
  employee_salary: number;
  id: string;
  profile_image: string;
}

@Injectable({
  providedIn: "root",
})
export class EmployeeService {
  employeesSub = new Subject<Employee[]>();

  employees: Employee[];

  constructor(private http: HttpClient) {
    this.api().subscribe((res) => {
      this.employees = res.data;
      this.employeesSub.next(this.employees);
    });
  }

  getEmployees(){
    this.employeesSub.next(this.employees);
  }

  addEmployee(name,age,salary) {
    this.employees.unshift({
      id:(this.employees.length + 1).toString(),
      employee_age: age,
      employee_name: name,
      employee_salary: salary,
      profile_image: ""
    });
    this.employeesSub.next(this.employees);
  }

  api() {
    return this.http
      .get<any>(environment.employeeUrl)
      .pipe(map((data) => data.items));
  }
}

模板中的代码

<h2>List</h2>

<div style="display: …

我有一个用 Angular 11.2.7 和 Angular Material 制作的简单注册表单。这是堆栈闪电战。

我将密码字段的可见性更改为最后 3 秒，然后它们的状态更改回“密码”。因此，当用户单击任何密码控件中的“眼睛”时，密码文本将以明文显示，然后在 3 秒内变回点。

但问题是，此状态更改会触发整个表单验证，并且所有无效的内容都会看起来“无效”（呈红色）。谁能告诉我为什么吗？

另外，我必须对我的 Observables 使用多播，但我可能做得不对。我不知道。

我更新angular/cli后,出现错误:

error TS2339: Property 'map' does not exist on type 'Observable<Response>'

我尝试了来自Property'map'的所有可能的解决方案'类型'Observable <Response>'上不存在

但仍然存在错误.

有人可以说明Angular 6 / rxjs 6中take（1）的语法吗？

在下面的代码中，我从Firestore检索文档，然后将其作为可观察的文档使用。

然后，我订阅该可观察的内容，阅读文档的时间戳，并以人类可读的格式设置年龄。效果很好，但是不必每次文档流中都有更改时都执行。它只需要执行一次，因为文档时间戳永远不会改变。

我如何修改此代码以合并take(1)，以便年龄字符串仅生成一次，并且订阅items未保持打开状态？我take(1)在Angular / rxjs版本6下找不到任何清晰的语法示例。我可以找到的所有示例都是针对先前版本的。

import { Component, Input, OnChanges } from '@angular/core';
import { AngularFirestore, AngularFirestoreDocument } from 'angularfire2/firestore';
import { Item } from '../../interfaces/item';

@Component({
  selector: 'app-item',
  templateUrl: './item.component.html',
  styleUrls: ['./item.component.scss']
})
export class ItemComponent implements OnChanges {

  @Input() itemId: string;
  private itemDoc: AngularFirestoreDocument<Item>;
  public item: Observable<Item>;
  public age: string;

  constructor(private afs: AngularFirestore) {}

  ngOnChanges() {

    if ( this.itemId ) {

      this.itemDoc = this.afs.doc<Item>('items/' + this.itemId);
      this.item …

我有一个数组中的任务列表,我需要运行它们来调用Web服务.

但问题是,它们在一个数组中,我需要一次运行一个,这意味着:只有在完成这一个时才运行下一个,无论是否发生错误.

我在这里使用了这个代码,我使用的是combineLatest,但是这样我只有在完成所有这些时才得到结果.

let arrayOfTasks: ServerTask[] = cacheInfo.cacheData;
let observables = [];
arrayOfTasks.forEach((task: ServerTask) => {
  if (task.method === 'post') {
    let observable$: any = this.restService.sendPost(task.action, task.payload, false, task.cacheName);
    observables.push(observable$);
  }
});

const combined = combineLatest(observables);
combined.subscribe((value: any[]) => {
  console.log('ARRAY DATA RETURNED');
  console.log(value);
}, error => {
  console.error(`Error running stored tasks: ${error}`);
}, () => {
  console.log('All cache tasks executed...');
});

有什么想法吗？

编辑1:

正如@trichetriche所说,这是最终的解决方案:

concat(...observables).subscribe((result: any) => {
  console.log('RESULT: ', result);
}, error …

尝试从特定组件导航到其他路线时，出现一个奇怪的错误。如果我导航到其他组件的不同路线，则不会看到此错误。我附上错误的屏幕截图

我已经搜索了这个问题，似乎是RxJS或空路由的问题。但是我在空路由中添加了pathMatch：'full'，我的RxJS版本是6.3.3。任何想法或任何解决此问题的人都可以提供很大帮助。