角度材质选项卡（mat-tab）未显示内容

Question

我正在使用Angular 5的Angular Material选项卡。我想将这些选项卡用作链接页面上的子菜单。我需要显示很多链接，因此我将它们分成较小的部分，这些部分将从选项卡组中选择时显示。

我使用ngFor显示每个选项卡，然后使用ngFor将链接集显示为无序列表。选项卡组工作正常，但链接的ul永远不会显示。

我可以挖掘的所有相关帖子都是通过添加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 Demo