Как мне реализовать реляционные / вложенные наблюдаемые?

Question

У меня есть класс Row, который будет показан на странице, и дочерний элемент Rows будет показан под вложенным родительским элементом Row. Максимальная глубина вложенных рядов отсутствует.

export class Row {
    constructor(
        public name: string,
        public id: number,
        public parentId: number,
    ) {}
}

все Rows хранятся и управляются в пределах RecipeService, на который RowComponent имеет подписку.

import { Component, OnInit, Input } from '@angular/core';
import { Field } from 'src/app/classes/field';
import { Row } from 'src/app/classes/row';
import { RecipeService } from 'src/app/services/recipe.service';

@Component({
  selector: 'app-recipe-row',
  template: `
  <div class="col">
    <div class="row" height="30px" *ngFor="let row of rows.filter(r => r.parentId = thisRow.parentId); let i = index">
      <app-recipe-row [thisRow]="row"></app-recipe-row> 
    </div>  
  </div>
  `,
  styleUrls: ['./recipe-row.component.css']
})
export class RecipeRowComponent implements OnInit {

  rows: Row[];
  fields: Field[][];

  @Input() thisRow: Row;

  constructor(public rs: RecipeService) { }

  ngOnInit(): void {
    this.loadRows();
    this.loadFields();
  }

  loadRows(): void {
    this.rs.rowO$
      .subscribe(
        rows => this.rows = rows
      );
  }

  loadFields(): void {
    this.rs.fieldO$
      .subscribe(
        fields => this.fields = fields
      );
  }
}

Эта проблема, которая возникает у меня (кроме, вероятно, неправильного использования rx js), заключается в том, что привязки не могут содержать назначения, поэтому я не уверен, как лучше всего каскадировать эти дочерние строки

Answer 1

Единственная проблема, с которой вы столкнулись, состоит в том, что у вас есть сложное выражение в *ngFor.

Я бы переместил фильтр в вашу модель и сделал бы ваш HTML максимально простым.

html

<div class="col">
  <div class="row" height="30px" *ngFor="let row of rows">
    <app-recipe-row [thisRow]="row"></app-recipe-row> 
  </div>  
</div>

Вам также необходимо разобраться с фильтром. В настоящее время вы сопоставляете parentId с parentId, когда вам нужно сопоставить parentId с идентификатором.

component.ts

rows: Row[];

loadRows(): void {
  this.rs.rowO$.subscribe(rows => {
    if (!this.thisRow) {
      this.rows = rows.filter(row => !row.parentId);  
    } else {
      this.rows = rows.filter(row => 
        row.parentId && row.parentId === this.thisRow.id);
    }
  });
}

DEMO: https://stackblitz.com/edit/angular-z8j8te

Эта демонстрация не использует наблюдаемые только для того, чтобы сделать вещи максимально простыми. Если наблюдаемое, на которое вы подписываетесь, не делает что-то странное, я сомневаюсь, что это вызовет у вас проблемы.