Вкладка "Угловой материал" (вкладка мат) не отображает содержимое

Question

Я использую вкладки Angular Material с Angular 5. Я хочу использовать вкладки в качестве подменю на странице ссылок. Мне нужно отобразить много ссылок, поэтому я разбил их на более мелкие разделы, которые будут отображаться при выборе из группы вкладок.

Я отображаю каждую вкладку, используя 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[] последний (ниже ссылки A-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