javascript - 在 Angular 中使用 rxjs 进行双向数据绑定(bind)

Question

我有一个 Angular 模板和组件，改编自 Angular Material 的 dashboard schematic .

我想使用事件和双向数据绑定(bind)来操作卡片上的一些属性。乍一看，双向数据绑定(bind)似乎有效，因为我可以使用指令操作卡中给定索引的 editorContent 属性，并且这些更改反射(reflect)在我已经创建的简单

标记中添加到 View 中进行调试。但是，这似乎并没有实际更新组件中的 cards 对象。

我读到要操作可观察量，您必须首先订阅它们。 clearEditor方法成功从cards获取数据，但是contentEditor并没有从 View 中更新，并且在方法中将其设置为null似乎并没有改变cards 或者，如果我在构造函数中将其设置为非空或非 null 的字符串。

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

订阅 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);
}

在本例中使用 Subject允许在调用 clearEditor 方法时调用其 next 方法。对主题调用 next 就是“将数据放入事件流”。请注意，Subject 扩展了 Observable，因此Subject 是一个 Observable。

switchMap是一个运算符，用于将语言Subject和断点Observable带入单个卡片Observable中。现在，每次在语言主题上调用 next 时，卡片 Observable 都会发出更新的卡片。