如何仅以角度显示选定的项目信息

Question

在我的项目中，我有这个帮助/常见问题解答对话框。我正在尝试制作 仅显示选定的信息，但不确定如何显示，因此如果我能得到任何帮助或建议，我将不胜感激。

例如，

当用户从展开面板中选择项目 1 时，右侧的列将只显示项目 1 的信息并隐藏其他信息。

<div mat-dialog-content class="dialog-container">
    <div class="container-inside-dialog">
        <div class="row">
            <div class="column left" style="background-color:pink">
                <mat-nav-list>
                    <mat-expansion-panel>
                      <mat-expansion-panel-header>
                        Header 1
                      </mat-expansion-panel-header>            
                  <a mat-list-item routerLink>Item 1</a>
                  <a mat-list-item routerLink>Item 2</a>
                  <a mat-list-item routerLink>Item 3</a>
                    </mat-expansion-panel>
                  </mat-nav-list>

                  <mat-nav-list>
                    <mat-expansion-panel>
                      <mat-expansion-panel-header>
                        Header 2
                      </mat-expansion-panel-header>     
                  <a mat-list-item routerLink>Item 4</a>
                  <a mat-list-item routerLink>Item 5</a>
                    </mat-expansion-panel>
                  </mat-nav-list>
            </div>
            <div class="column right" style="background-color:grey">
              <!-- Show this only when Item 1 is selected -->
                <h2>Item 1</h2>
                <p>Some text for Item 1..</p>
                <p>more text.......</p>

              <!-- Show this only when Item 2 is selected -->
                <h2>Item 2</h2>
                <p>Some text for Item 2..</p>

              <!-- Show this only when Item 3 is selected -->
                <h2>Item 3</h2>
                <p>Some text for Item 3..</p>

              <!-- Show this only when Item 4 is selected -->
                <h2>Item 4</h2>
                <p>Some text for Item 4..</p>

              <!-- Show this only when Item 5 is selected -->                
                <h2>Item 5</h2>
                <p>Some text for Item 5..</p>
            </div>
        </div>
    </div>
</div>

这是我的 stackblitz 项目https://stackblitz.com/edit/mat-expansion-panel-bn9uwv

谢谢

Answer 1

分步进行

1-检测点击你想被点击的每个项目

2-分别识别每次点击

3-存储每次点击的索引或次数

4-使用该数字仅显示所需的项目

这里是代码

组件

import {Component} from '@angular/core';

/**
 * @title Basic expansion panel
 */
@Component({
  selector: 'expansion-overview-example',
  templateUrl: 'expansion-overview-example.html',
  styleUrls: ['expansion-overview-example.css'],
})
export class ExpansionOverviewExample {
  panelOpenState = false;

  clickedIndex = -1;

  clicked(index:number){
    this.clickedIndex = index;
    console.log(index);
  }

}


/**  Copyright 2018 Google Inc. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at http://angular.io/license */

模板

<div mat-dialog-content class="dialog-container">
    <div class="container-inside-dialog">
        <div class="row">
            <div class="column left" style="background-color:pink">
                <mat-nav-list>
                    <mat-expansion-panel>
                      <mat-expansion-panel-header>
                        Header 1
                      </mat-expansion-panel-header>            
                  <a mat-list-item routerLink (click)="clicked(1)">Item 1</a>
                  <a mat-list-item routerLink (click)="clicked(2)">Item 2</a>
                  <a mat-list-item routerLink (click)="clicked(3)" >Item 3</a>
                    </mat-expansion-panel>
                  </mat-nav-list>

                  <mat-nav-list>
                    <mat-expansion-panel>
                      <mat-expansion-panel-header>
                        Header 2
                      </mat-expansion-panel-header>     
                  <a mat-list-item routerLink (click)="clicked(4)" >Item 4</a>
                  <a mat-list-item routerLink (click)="clicked(5)">Item 5</a>
                    </mat-expansion-panel>
                  </mat-nav-list>
            </div>
            <div class="column right" style="background-color:grey">
              <!-- Show this only when Item 1 is selected -->
                <ng-container *ngIf= "clickedIndex == -1 ||  clickedIndex ==1">
                <h2>Item 1</h2>
                <p>Some text for Item 1..</p>
                <p>more text.......</p>
                </ng-container>
              <!-- Show this only when Item 2 is selected -->
                <ng-container *ngIf= "clickedIndex == -1 ||  clickedIndex ==2">
                <h2>Item 2</h2>
                <p>Some text for Item 2..</p>
                <p>more text.......</p>
                </ng-container>
              <!-- Show this only when Item 1 is selected -->
                <ng-container *ngIf= "clickedIndex == -1 ||  clickedIndex ==3">
                <h2>Item 3</h2>
                <p>Some text for Item 3..</p>
                <p>more text.......</p>
                </ng-container>
              <!-- Show this only when Item 1 is selected -->
                <ng-container *ngIf= "clickedIndex == -1 ||  clickedIndex ==4">
                <h2>Item 4</h2>
                <p>Some text for Item 4..</p>
                <p>more text.......</p>
                </ng-container>
              <!-- Show this only when Item 1 is selected -->                
                <ng-container *ngIf= "clickedIndex == -1 ||  clickedIndex ==5">
                <h2>Item 5</h2>
                <p>Some text for Item 5..</p>
                <p>more text.......</p>
                </ng-container>
            </div>
        </div>
    </div>
    <div fxLayout="row" fxLayoutAlign="center start">
        <span style="flex-grow: 1;"></span>
        <button mat-raised-button color="primary" mat-dialog-close [style.marginRight.px]="20"
            matTooltip="Close Help">Close</button>
    </div>
</div>