根据Angular 14中的搜索结果扩展特定的垫子手风琴

Question

我在手风琴上方搜索了一个单词选项，因此用户可以在手风琴中搜索特定的单词，并且那些具有匹配的单词的手风琴被扩展并突出显示了搜索的单词。目前，搜索并突出显示字符串部分正在工作，但是根据所选索引，手风琴并没有扩展。默认情况下，只有第一个手风琴才能为所有搜索结果打开。在此处输入图像描述 您能帮助以下代码中缺少的内容吗？

terms.ts

import { Component, OnInit } from '@angular/core';
import { CommonService } from '../service/common.service';
import { GlossaryOfTerms } from '../model/GlossaryOfTerms.model';

@Component({
  selector: 'app-terms',
  templateUrl: './terms.component.html',
  styleUrls: ['./terms.component.scss']
})
export class GlossaryOfTermsComponent implements OnInit {
  search: string = "";
  gTerms: GlossaryOfTerms[] = [];
  step = 0;

  constructor(private commonService: CommonService) {}

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

  public OnSearched(searchTerm: string) {
    this.search = searchTerm;
    this.findSearchedValue();
  }

  getTerms(): void {
    this.commonService.getGlossaryOfTerms().subscribe((terms) => {
      this.gTerms = terms;
      console.log("terms", this.gTerms );
    });
  }

  findSearchedValue(): void {
    this.gTerms?.forEach((terms, index) => {
        var decription = terms.description;
        var name = terms.name;
        if(this.search != '' || undefined) {
          if ((decription?.includes(this.search)) || (name?.includes( this.search) )) {
            console.log("openindex", index);
            this.step = index;
          } else {
            console.log("closeindex", index);
            this.step = index;
          }
        }
    });
  }

}

<app-search #searchedValue (searched)="OnSearched($event)"></app-search>

  <mat-accordion multi="true">
    <mat-expansion-panel #accordianContainer *ngFor="let term of gTerms; let i = index" [expanded]="step === i">
        <mat-expansion-panel-header>
            <mat-panel-title>
              <p [innerHTML]="term.name | highlightSearch: search"></p>
            </mat-panel-title>
        </mat-expansion-panel-header>
        <div class="content">
            <div class="content-text">
              <p [innerHTML]="term.description | highlightSearch: search"></p>
            </div>
        </div>
    </mat-expansion-panel>
  </mat-accordion>

Answer 1

我找到了我问题的解决方案，因为有人可以发现它有帮助。
打开选择

  findSearchedValue(): void {
    this.step = 0;
    var searchTerm = this.search.toLowerCase();
    this.gTerms?.forEach((terms, index) => {
      if (this.search != '' || undefined) {
        if ((terms.description?.toLowerCase().includes(searchTerm)) || (terms.name?.toLowerCase().includes(searchTerm))) {
          this.step = ++this.step;
          this.openSelected(index, this.step);
        }
      }
    });
  }

  openSelected(indexed: number, step: number): boolean {
    return this.step > indexed ? true : false;
  }

*ngFor="let term of gTerms; let i=index" [expanded]="openSelected(i, step)"