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

您已将字符串传递到linksMenu[]。你需要传入数组。您还需要最后声明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}, ]（在链接A-D下面）。

function check_trainer_location() {
global $wpdb;
$islocation = $wpdb->get_results("SELECT * FROM {$wpdb->prefix}wppl_friends_locator WHERE member_id='" . bp_displayed_user_id() . "'");
if(is_user_logged_in() && bp_is_my_profile() && count($islocation) < 1) {
return 'No location set';
}
}

请参阅代码的StackBlitz示例。

StackBlitz Demo

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

1 个答案: