订阅Observable不允许操作Observable中的数据。将Observables视为一个事件流。通过订阅它们，您只能阅读流中的内容。根据场景的不同，有不同的方法来处理将数据放入流中的问题。以下是一个片段，希望能帮助您处理您的场景：
我有一个Angular模板和组件，它是根据Angular Material的面板原理图改编的。
我想使用事件和双向数据绑定来操作cards上的一些属性。乍一看，双向数据绑定似乎有效，因为我可以使用指令操作卡中给定索引的editorContent属性，这些更改反映在我添加到视图中用于调试的简单
标记中。但是，这似乎并没有实际更新组件中的cards对象。
我读过，要操作可观察性，必须先订阅它们。clearEditor方法成功地从cards中获取了数据，但contentEditor没有从视图中更新，并且如果我在构造函数中将其设置为非空或非null的字符串，则在方法中将其设置成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="assetsdocument.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>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方法。在Subject上调用next就是"将数据放入事件流"。注意，一个主体延伸了一个可观察的，因此一个主体是一个可观测的。
switchMap是一个运算符，用于将语言Subject和断点Observable合并到一个单独的卡片Observable中。现在，每次在Subject语言上调用next时，Observable卡都会发出更新后的卡。
以下代码是我们最终采用的方法：
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 = "";
}
}