javascript - 对话框打开时如何显示信息文本

Question

我有这个帮助对话框，出于某种原因，我的信息文本在对话框打开后没有立即显示。它仅在我单击该子部分时才开始显示，所以我想知道如何在用户打开对话框后立即显示它。任何建议或帮助将不胜感激。

HTML

//Clicking this will take the user each subsection

<div *ngFor="let subSection of mappedSecSub | async; let last=last">
  <div *ngIf="subSection.parentId == section.id;" (click)="clicked(subSection.id, section.id)">
   <a mat-list-item>{{subSection.name}}
   <mat-divider *ngIf="!last" class="solid"></mat-divider>
   </a>
 </div>
</div>

// This display the informations text

<div class="column right">
   <div *ngFor="let section of targetSectionGroup">
   <h1 *ngIf="section.parentId == null" class="hint">{{section?.name}}</h1>
  </div>
     <div *ngFor="let section of targetSectionGroup">
     <div *ngIf="section.parentId != null">
     <h2 id="s{{section.id}}ss{{section.parentId}}"  class="hint">{{section?.name}}</h2>
    <p class="multi_lines_text" [innerHTML]="section?.text"></p>
  </div>
  </div>
</div>

TS

  mappedSections: BehaviorSubject<any[]> = new BehaviorSubject<any[]>([]);
  mappedSecSub = this.mappedSections.asObservable()
  targetSection: { id, name, parentId, text };
  targetSectionGroup: { id, name, parentId, text }[] = [];

  ngOnInit(): void {
    this.fetchData();
  }

fetchData = () => {
    this.HelpService.getHelp().subscribe(res => {
      this.mappedSections.next(res['res'])
      let newMappedSection = this.mappedSections.getValue()
      for (let i = 0; i < newMappedSection.length; i++) {
        const element = newMappedSection[i];
        if (element.parentId) {
          this.targetSection = element;
          break
        }
      }
    })
  }

  clicked(id, parentId) {
    this.targetSectionGroup = [];
    let data = this.mappedSections.getValue()
    for (let i = 0; i < data.length; i++) {
      if (data[i].parentId == parentId || data[i].id == parentId) {
        this.targetSectionGroup.push(data[i]);
      }
      if (data[i].id === id) {
        this.targetSection = data[i]
      }
    }
    document.querySelector(`#s${id}ss${parentId}`).scrollIntoView({ behavior: 'smooth' })
  }

现在，信息文本仅在我单击小节时显示。我想在帮助对话框打开后立即显示它。

标签： javascripthtmlangulartypescriptfrontend

Answer 1

我想这应该工作

fetchData = () => {
  this.HelpService.getHelp().subscribe(res => {
    this.mappedSections.next(res['res']);

    const response = res['res'];
    this.clicked(response.id, response.parentId);
    let newMappedSection = this.mappedSections.getValue()
    for (let i = 0; i < newMappedSection.length; i++) {
      const element = newMappedSection[i];
      if (element.parentId) {
        this.targetSection = element;
        break
      }
    }
  })
}