Двухстороннее связывание данных с использованием rxjs в Angular

Question

У меня есть шаблон и компонент Angular, которые я адаптировал из схемы панели инструментов Angular Material .

. Я хотел бы манипулировать некоторыми свойствами cards, используя события и двасвязывание данныхНа первый взгляд кажется, что двусторонняя привязка данных работает, поскольку я могу манипулировать свойством editorContent данного индекса в карточке с помощью директив, и эти изменения отражаются в простом теге

, который я добавил в представление.для отладки.Однако, по-видимому, это фактически не обновляет объект cards в компоненте.

Я читал, что для манипулирования наблюдаемыми объектами вы должны сначала подписаться на них.Метод clearEditor успешно получает данные из cards, но contentEditor не обновляется из представления, и установка его в null в методе также не меняет значение cards, если бы я должен был установитьэто строка, которая не является пустой или нулевой в конструкторе.

import {
  Component
} from "@angular/core";
import {
  map
} from "rxjs/operators";
import {
  Breakpoints,
  BreakpointObserver
} from "@angular/cdk/layout";
import {
  Observable
} from 'rxjs';

@Component({
  selector: "app-repl",
  templateUrl: "./repl.component.html",
  styleUrls: ["./repl.component.scss"]
})
export class REPLComponent {
  cards: Observable < any > ;

  constructor(private breakpointObserver: BreakpointObserver) {
    this.cards = this.breakpointObserver.observe(Breakpoints.Handset).pipe(
      map(({
        matches
      }) => {
        if (matches) {
          return [{
              title: "HTML",
              content: "code",
              language: "html",
              cols: 1,
              rows: 1,
              editorContent: ""
            },
            {
              title: "CSS",
              content: "code",
              language: "css",
              cols: 1,
              rows: 1,
              editorContent: ""
            },
            {
              title: "PDF",
              content: "pdf",
              cols: 1,
              rows: 1
            }
          ];
        }

        return [{
            title: "HTML",
            content: "code",
            language: "html",
            cols: 1,
            rows: 1,
            editorContent: ""
          },
          {
            title: "PDF",
            content: "pdf",
            cols: 1,
            rows: 2
          },
          {
            title: "CSS",
            content: "code",
            language: "css",
            cols: 1,
            rows: 1,
            editorContent: ""
          }
        ];
      })
    );
  }

  clearEditor(language: string) {
    this.cards.subscribe(cards => {
      cards.forEach(function(card) {
        if (card.language === language) {
          card.editorContent = null;
        }
      });
    });
  }
}

<div class="grid-container">
  <h1 class="mat-h1">REPL</h1>
  <mat-grid-list cols="2" rowHeight="400px">
    <mat-grid-tile *ngFor="let card of cards | async" [colspan]="card.cols" [rowspan]="card.rows">
      <mat-card class="dashboard-card">
        <mat-card-header>
          <mat-card-title>
            {{card.title}}
            <button *ngIf="card.content==='code'" mat-icon-button class="more-button" [matMenuTriggerFor]="menu" aria-label="Toggle menu">
              <mat-icon>more_vert</mat-icon>
            </button>
            <mat-menu #menu="matMenu" xPosition="before">
              <button mat-menu-item (click)="clearEditor(card.language)">Clear</button>
              <button mat-menu-item>Download</button>
            </mat-menu>
          </mat-card-title>
        </mat-card-header>
        <mat-card-content *ngIf="card.content==='code'">
          <td-code-editor style="height: 300px" theme="vs-dark" flex [language]="card.language" [(ngModel)]="card.editorContent"></td-code-editor>
          <p>{{card.editorContent}}</p>
        </mat-card-content>
        <mat-card-content *ngIf="card.content==='pdf'">
          <pdf-viewer src="\assets\document.pdf" style="display: block; max-width: 490px; max-height: 100%;" [render-text]="false" [original-size]="false" [autoresize]="true" [show-all]="false" [page]="1">
          </pdf-viewer>
        </mat-card-content>
      </mat-card>
    </mat-grid-tile>
  </mat-grid-list>
  <button mat-button>
    <mat-icon>cloud_upload</mat-icon>
    Generate PDF
  </button>
  <button mat-button>
    <mat-icon>save_alt</mat-icon>
    Download PDF
  </button>
</div>

Answer 1

Следующий код - подход, который мы в конечном итоге выбрали:

export class REPLComponent implements OnInit {
  columns: number = 2;

  cards: Array < Card > = [{
      title: "HTML",
      content: "code",
      language: "html",
      cols: 1,
      rows: 1,
      editorContent: '<!DOCTYPE html><html><head><title>My First Newsletter</title><meta charset="UTF-8"></head><body></body></html>'
    },
    {
      title: "PDF",
      content: "pdf",
      language: null,
      cols: 1,
      rows: 2,
      editorContent: null
    },
    {
      title: "CSS",
      content: "code",
      language: "css",
      cols: 1,
      rows: 1,
      editorContent: "body {}"
    }
  ];

  layoutChange: Observable < BreakpointState > ;

  constructor(
    private breakpointObserver: BreakpointObserver,
    private http: HttpClient
  ) {}

  ngOnInit() {
    this.layoutChange = this.breakpointObserver.observe(Breakpoints.Handset);

    this.layoutChange.subscribe((result: BreakpointState) => {
      this.columns = result.matches ? 1 : 2;

      this.cards.forEach((card: Card) => {
        card.cols = 1;
        card.rows = !result.matches && card.content == "pdf" ? this.columns : 1;
      });
    });
  }

  clearEditor(card: Card) {
    card.editorContent = "";
  }
}

Answer 2

Подписка на Observable не позволяет вам манипулировать данными в Observable.Думайте об Observables как о потоке событий.Подписавшись на них, вы можете только читать, что выходит из этого потока.В зависимости от сценария существуют разные способы ввода данных в поток.Вот фрагмент кода, который, надеюсь, поможет вам разобраться с вашим сценарием:

import { Subject } from 'rxjs';
import { map, switchMap, startWith } from 'rxjs/operators'

private language = new Subject<string>();

cards = this.breakpointObserver.observe(Breakpoints.Handset).pipe(
  map(breakpoint => {
    /* content of the map operator that you showed in your question */
    return cards;
  }),
  switchMap(cards => {
    return this.language.pipe(
      map(language => {
        const card = cards.find(c => c.language === language);
        card.editorContent = null;
        return cards;
      }),
      // when the outter breakpoint Observable emits, we just 
      // want to emit the cards as is.
      startWith(cards)
    })
  )
);

clearEditor(language: string) {
  this.language.next(language);
}

В этом случае использование Субъект позволяет вызывать его метод next, когда метод clearEditorназывается.Вызов next для субъекта - это «помещение данных в поток событий».Обратите внимание, что Субъект расширяет Наблюдаемую, поэтому Субъект является Наблюдаемой.

switchMap - это оператор, который используется здесь для объединения языка Субъекта и точки останова, наблюдаемой, в одну наблюдаемую карту.Теперь каждый раз, когда next вызывается на языке Subject, карта Observable будет выпускать обновленные карты.