Angular 8 UI observable 不触发更改检测 - ChangeDetectionStrategy 设置为默认值

Question

我有一个容器组件，其中注入(inject)了一个服务。该服务包含一个可观察的。在容器组件的模板中，我使用异步管道将该可观察对象绑定(bind)到子组件的输入属性。一切似乎都正常，除了我必须与 UI 交互才能触发更改检测并显示通过可观察的数据推送的数据。

(不更新我的意思是:<ng-container *ngFor="let section of sections;">在子组件html中没有执行)

我尝试了很多事情，包括在父组件中创建另一个可观察对象，并通过该可观察对象中继来自服务的数据 - 但这只是一种故障排除措施，而且非常糟糕。我相信它有相同的结果。

注意:

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 能够立即反射(reflect)通过可观察对象推送的数据，而无需单击某些内容或以其他方式与 UI 进行交互。

在这种情况下，我尝试用可观察的来做到这一点，因为我似乎也无法让它以任何其他方式工作。

最终，我真正想要的是将 DocumentSection 数组作为服务中的公共(public)属性，通过服务上的方法更新该数组，并立即反射(reflect)对数组的更改。我不确定我是否真的需要一个可观察的东西。我希望服务上的属性就像组件上的本地属性一样。

有两个问题:

1. 此更改检测问题是怎么回事？我该如何解决它？

2. 为什么我不能(或可以)在服务上创建一个公共(public)数组并正常绑定(bind)它(不通过异步管道)并让它以与公共(public)数组相同的方式工作容器组件上的属性？

Answer 1

也许发生的情况是，它们的订阅(容器 View 中的异步)发生在初始文档到达之后，因此 Angular 不会接收该发射？

我会尝试改变:

private library = new Subject<DocumentSection[]>();

至

private library = new BehaviorSubject<DocumentSection[]>([]);

或者，您可以尝试完全不使用 observables，并绑定(bind)到通过 getter 访问的基本数组。

private _library = []; //  update when data is fetched
public get library() { return this._library || []; } // data-bind this