【发布时间】：2019-09-13 02:46:12
【问题描述】：
我有一个容器组件，其中注入了服务。该服务包含一个可观察的。在容器组件的模板中，我使用异步管道将该可观察对象绑定到子组件的输入属性。除了我必须与 UI 交互以触发更改检测并显示通过 observable 推送的数据之外，一切似乎都正常工作。
（不更新我的意思是：子组件html中的<ng-container *ngFor="let section of sections;">没有执行）
我尝试了很多方法，包括在父组件中创建另一个 observable，并通过该 observable 中继来自服务的数据 - 但这只是一种故障排除措施，非常麻烦。我相信它有同样的结果。
注意：
1. The service is pulling data from a .net backend via a socket (SignalR).
2. I am also using Angular Material's drag and drop library in this project.
3. **This post seems very similar**, but I can't discern a cause or solution from it: https://stackoverflow.com/questions/48955143/subscribing-to-observable-not-triggering-change-detection
4. I mention 3 because that person was using angular material's infinite scrolling library and I am using drag and drop. Maybe something in that library is interfering with change detection.
5. There is no OnPush change detection anywhere in this project
服务：
export class DocumentCreationService {
private library = new Subject<DocumentSection[]>();
public library$ = this.library.asObservable();
...
private registerOnServerEvents(): void {
this.proxy.on('documentSectionsRetrieved', (result: DocumentSection[]) => {
this.library.next(result);
});
}
...
public retrieveDocumentSections = () => {
this.proxy.invoke('getDocumentSections')
.then(() => console.log("getDocumentSections completed"))
.catch(err => console.error(err));
}
...
}
容器ts：
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent {
...
constructor(public documentCreator: DocumentCreationService) { }
}
容器html：
<document-section-library #library [hidden]="selectedView !== 'library'" [sections]="documentCreator.library$ | async" [connectedDropTargets]="dropTargets">
儿童 ts：
@Component({
selector: 'document-section-library',
templateUrl: './document-section-library.component.html',
styleUrls: ['./document-section-library.component.scss']
})
export class DocumentSectionLibraryComponent {
...
@Input()
public sections: DocumentSection[];
...
子 html：
<div class="document-section-library__contentarea" cdkDropList id="sectionLibrary" #sectionLibrary="cdkDropList" [cdkDropListConnectedTo]="connectedDropTargets" [cdkDropListData]="sections" (cdkDropListDropped)="onDrop($event)">
<ng-container *ngFor="let section of sections;">
<ng-template [ngIf]="section.content && section.content.length > 0" [ngIfElse]="table">
<document-section-custom class="document-section" cdkDrag
[id]="section.id"
[templateId]="section.templateId"
[name]="section.name"
[enabled]="section.enabled"
[content]="section.content">
</document-section-custom>
</ng-template>
<ng-template #table>
<document-section-table class="document-section" cdkDrag
[id]="section.id"
[templateId]="section.templateId"
[name]="section.name"
[enabled]="section.enabled"
[content]="section.content">
</document-section-table>
</ng-template>
</ng-container>
</div>
我希望 UI 立即反映通过 observable 推送的数据，而无需单击某些内容或以其他方式与 UI 交互。
在这种情况下，我试图用一个 observable 来做到这一点，因为我似乎也无法让它以任何其他方式工作。
最终，我真正想要的是将 DocumentSection 数组作为服务中的公共属性，通过服务上的方法更新该数组，并立即反映对数组的更改。我不确定我是否真的需要一个可观察的。我希望服务上的属性像组件上的本地属性一样。
所以两个问题：
这个变更检测问题是怎么回事，我该如何解决？
为什么不能（或可以）我，只需在服务上创建一个公共数组并正常绑定它（而不是通过异步管道）并让它以与公共数组相同的方式工作容器组件的属性？
【问题讨论】：
标签： angular rxjs signalr angular8