在Angular中使用rxjs进行双向数据绑定

时间:2018-12-11 01:19:22

标签: javascript angular rxjs angular-material

我有一个Angular模板和组件,它们已从Angular Material的dashboard schematic中改编而成。

我想使用事件和双向数据绑定来操纵cards上的某些属性。乍一看,双向数据绑定似乎有效,因为我可以使用指令在卡中操纵给定索引的editorContent属性,并且这些更改反映在我已经完成的简单

标记中添加到视图进行调试。但是,这似乎并未真正更新组件中的cards对象。

我已阅读到要操作可观察对象,您必须先订阅它们。 clearEditor方法已成功从cards获取数据,但未从视图更新contentEditor,并且在该方法中将其设置为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>

2 个答案:

答案 0 :(得分:1)

预订可观察对象不允许您操纵可观察对象中的数据。将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可以在调用next方法时调用其clearEditor方法。在主题上调用next是“将数据放入事件流”。请注意,主题扩展了可观察对象,因此主题是可观察对象。

switchMap是一个运算符,在此用于将主题和可观察到的断点语言带入可观察到的单个卡中。现在,每次在主题语言上调用next时,“可观察”卡片都会发出更新的卡片。

答案 1 :(得分:0)

以下代码是我们最终采用的方法:

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 = "";
  }
}