角材料選項卡（墊選項卡）不顯示內容

Question

我將Angular Material選項卡與Angular 5一起使用。我想將這些選項卡用作鏈接頁面上的子菜單。 我需要顯示許多鏈接，因此我將其分為較小的部分，當從選項卡組中選擇它們時將顯示這些部分。

我使用ngFor顯示每個選項卡，然后也使用ngFor將鏈接集顯示為無序列表。 選項卡組工作正常，但永遠不會顯示所有鏈接。

我可以挖掘的所有相關帖子都通過添加BrowserAnimationsModule得以解決，但這已導入到我的項目中。

這是HTML：

<mat-tab-group>
    <mat-tab *ngFor="let tab of linkMenu" label="{{tab.dispName}}">
        <div class="tab-content">
            <ul>
                <li *ngFor="let link of tab.varName"><a href="link.url">{{link.name}}</a></li>
            </ul>
        </div>
    </mat-tab>
</mat-tab-group>

這是TS代碼

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

@Component({
  selector: 'app-resources',
  templateUrl: './resources.component.html',
  styleUrls: ['./resources.component.less']
})
export class ResourcesComponent implements OnInit {

    linkMenu = [
        {dispName: "Link Set A", varName: "linksA"},
        {dispName: "Link Set B", varName: "linksB"},
        {dispName: "Link Set C", varName: "linksC"},
        {dispName: "Link Set D", varName: "linksD"},
    ]

    linksA = [
        {name: "foo1",url: ""},
        {name: "bar1",url: ""},
        {name: "spam1",url: ""},
        {name: "eggs1",url: ""}
    ]

    linksB = [
        {name: "foo2",url: ""},
        {name: "bar2",url: ""},
        {name: "spam2",url: ""},
        {name: "eggs2",url: ""}
    ]

    linksC = [
        {name: "foo3",url: ""},
        {name: "bar3",url: ""},
        {name: "spam3",url: ""},
        {name: "eggs3",url: ""}
    ]

    linksD = [
        {name: "foo4",url: ""},
        {name: "bar4",url: ""},
        {name: "spam4",url: ""},
        {name: "eggs4",url: ""}
    ]

    constructor() { }

    ngOnInit() {
    }

}

Answer 1

您正在將字符串傳遞到linkMenu[] 。 您需要傳遞數組。 您還需要最后聲明linksMenu[] （在linksA-D下面）。

linkMenu = [
        {dispName: "Link Set A", varName: this.linksA},
        {dispName: "Link Set B", varName: this.linksB},
        {dispName: "Link Set C", varName: this.linksC},
        {dispName: "Link Set D", varName: this.linksD},
    ]

請參見代碼的StackBlitz工作示例。

StackBlitz演示