使用*ngIf和*ngFor以角度打開側邊欄選單

我知道這應該很簡單，但我正在嘗試找到一種很好的方法來執行以下操作：

我的側邊欄中有一個選單，我希望通過單擊特定的跨度，它不會將我路由到某個地方，而是會在其中顯示另一個選單。下面是代碼：

側邊欄.html

<div *ngFor="let item of items">
  <span>{{item.label}}
<div *ngIf="isClicked" *ngFor="let nestedItem of item.nestedItems" class="nav-nestedItem-label">
  {{nestedItem.label}}
</div>

側邊欄.ts

      this.items = [
    { label: 'A', image: 'dashboard', route: 'AAA' },
    { label: 'B', image: 'my-apps', route: 'BBB' },
    { label: 'C', image: 'app-store', route: 'CCC' },
    { label: 'D', image: 'data', route: 'DDD' },
    { label: 'E', image: 'commercial-tools', route: 'EEE' },
    { label: 'F', image: 'dev-tools', route: 'FFF', },
    { label: 'G', image: 'data-source-mng', route: '',
        nestedItems: [{label: 'GA'},
                      {label: 'GB'},
                      {label: 'GC'}]},
    
  ];

我希望nestedItems 通過按標簽'G' 為我打開，它也不會路由到任何地方。

他目前正在向我展示整個選單，包括nestedItems

這怎么能以一種美麗而不原始的方式安排呢？我做了一些方法，但代碼又長又麻煩。我需要一個美麗的方式

謝謝！！！

uj5u.com熱心網友回復：

你可以嘗試這樣的事情：

items = [
    { label: 'A', image: 'dashboard', route: 'AAA' },
    { label: 'B', image: 'my-apps', route: 'BBB' },
    { label: 'C', image: 'app-store', route: 'CCC' },
    { label: 'D', image: 'data', route: 'DDD' },
    { label: 'E', image: 'commercial-tools', route: 'EEE' },
    { label: 'F', image: 'dev-tools', route: 'FFF', },
    { label: 'G', image: 'data-source-mng', route: '',
        nestedItems: [{label: 'GA', route: 'GAAA'},
                      {label: 'GB', route: 'GBBB'},
                      {label: 'GC', route: 'GCCC'}]},
    
  ];

  myClick(item: any, event?: any): void {
    if (item.nestedItems) {
      event.target.querySelector('div').hidden = false;
    } else {
      // redirect to...
    }
  }

和你的 html：

<div *ngFor="let item of items" (click)="myClick(item, $event)">
    <span>{{item.label}}
        <div hidden="true" *ngIf="item.nestedItems" class="nav-nestedItem-label">
            <div *ngFor="let nestedItem of item.nestedItems" (click)="myClick(nestedItem)">
                &nbsp;&nbsp;>&nbsp;{{nestedItem.label}}
            </div>
        </div>
    </span>
</div>

uj5u.com熱心網友回復：

我會將點擊的選單項存盤在一個屬性中。然后，您可以使用*ngIf將回圈item與單擊的專案進行比較來決定是否顯示選單項。

組件.html

<div *ngFor="let item of items" (click)="expand(item)">
  <span>{{item.label}}</span>
  <ng-container *ngIf="item === expanded">
    <div *ngFor="let nestedItem of item.nestedItems">
      {{nestedItem.label}}
    </div>
  </ng-container>
</div>

(click)="expand(item)"處理外部 div 上的單擊事件，將當前item作為單個引數傳遞。

<ng-container>是，沒有得到呈現的角度成分（也，你不能同時使用*ngIf，并*ngFor在相同的元素）

*ngIf="item === expanded"僅<ng-container>當expanded專案與當前的物件相同時才呈現item。

組件.ts

  items: Item[] = [
    { label: 'A', image: 'dashboard', route: 'AAA' },
    { label: 'B', image: 'my-apps', route: 'BBB' },
    { label: 'C', image: 'app-store', route: 'CCC' },
    { label: 'D', image: 'data', route: 'DDD' },
    { label: 'E', image: 'commercial-tools', route: 'EEE' },
    {
      label: 'F',
      image: 'dev-tools',
      nestedItems: [{ label: 'FA', route: 'FAAA' }],
    },
    {
      label: 'G',
      image: 'data-source-mng',
      nestedItems: [
        { label: 'GA', route: 'GAAA' },
        { label: 'GB', route: 'GBBB' },
        { label: 'GC', route: 'GCCC' },
      ],
    },
  ];

  expanded?: Item;

  expand(item: Item): void {
    this.expanded = item;
  }

我創建了 2 個介面，如下所示。您也可以在expanded: any;不使用介面的情況下進行宣告，但我個人的偏好是在可能的情況下使用型別。

interface Item {
  label: string;
  image?: string;
  route?: string;
  nestedItems?: SubItem[];
}

interface SubItem {
  label: string;
  route: string;
}

范圍外：單擊選單外的元素時折疊選單項。

Stackblitz 演示：https ://stackblitz.com/edit/angular-ivy-f1kifq ? file = src/app/app.component.html

標籤：html 有角的 打字稿

上一篇：將不同類別的引導程式分配給一個元素，但當解析度改變時它無法回應

下一篇：BootstrapScrollspy不起作用-缺少什么？