双向数据绑定在 ng-template 中不起作用

Question

我的selectedContent和selectedSummary无法显示（空白）。 相反，会显示

<p>

内的字符串。

<ng-template #modalTemplate>
  <div class="scroll-container">
    <div class="left-content">
      <div class="scrollable-text" >
        {{ selectedContent }}
        <p>Lorem ipsum</p>
      </div>
    </div>
    <div class="right-content">
      <div class="scrollable-text">
        {{ selectedSummary }}
        <p>Lorem ipsum</p>
      </div>
    </div>
  </div>
</ng-template>

在 .ts 中，我有一种方法可以在单击检查时打开 modal。在此方法中，我设置了 content 和 summary，将其传递给我的 modalService，该服务将该模态附加到正文并显示它。

  onInsepctTranscription(modalTemplate: TemplateRef<any>, content: string, summary: string) {
    console.log('On inspect');
    this.selectedContent = content;
    this.selectedSummary = summary;
    console.log('Content', this.selectedContent);

    this.modalService
      .open(modalTemplate, { size: 'lg', title: 'Foo' })
      .subscribe((action) => {
        console.log('modalAction', action);
      });
  }

此外，那些 two 属性也被声明为休耕：

selectedContent = 'NO CONTENT'; selectedSummary = 'NO SUMMARY';

当我将所有内容移到 ng-template 之外时，selectedContent 和 selectedSummary 都会显示，但在 ng-template 内部我只能显示硬编码字符串。

此时我尝试了很多事情。我检查我的scss是否是因为这个。我在控制台中检查了是否有错误。我检查了是否设置了正确的值（如果不正确，它应该至少显示默认值）

整个 HTML

<app-page-layout>
  <div class="content-layout">
    <h1 id="page-title" class="content__title">Transcriptions</h1>
    <div class="content__body">
      <ul class="accordion">
        <ng-container *ngFor="let item of transcriptions; let first = first">
          <li class="accordion-list">
            <div class="accordion-item" (click)="selectItem(item.id)">
              <app-transcription [transcriptionItem]="item" [isChecked]="first"></app-transcription>
              <i class='bx bx-chevron-right chevron-right-icon' *ngIf="item.id === selectedItemId"></i>
              <!-------MENU------->
              <div class="transcription-menu">
                <div class="menu-item" (click)="onDeleteTranscription(item.id)">
                  <i class='bx bx-trash'></i>
                  <span>Delete</span>
                </div>
                <div class="menu-item" (click)="onInsepctTranscription(modalTemplate, item.content, item.summary)">
                  <i class='bx bx-book-open'></i>
                  <span>Inspect</span>
                </div>
              </div>
              <!------------------>
            </div>
          </li>
        </ng-container>
      </ul>
    </div>
  </div>
</app-page-layout>

<ng-template #modalTemplate>
  <div class="scroll-container">
    <div class="left-content">
      <div class="scrollable-text" >
        {{ selectedContent }}
        <p>Lorem ipsum</p>
      </div>
    </div>
    <div class="right-content">
      <div class="scrollable-text">
        {{ selectedSummary }}
        <p>Lorem ipsum</p>
      </div>
    </div>
  </div>
</ng-template>

Answer 1

<p>

标签内的内容，那么这里有一些可能有帮助的调试步骤：

确保您的区块可以访问

selectedContent
1. 和

   selectedSummary

   。您可以尝试使用
ChangeDetectorRef.detectChanges()

2.  内的 

   onInsepctTranscription

    进行手动更改检测
   

   或者您可以尝试使用 rxjs 中的BehaviorSubject 作为这些变量。