真的确定如何问这个问题。但是我用ngFor填充了一个导航，并且数组中有变量。我认为这是在更改变量之前设置了变量。我将发布我的组件类，您可以看到我正在尝试做的事情。我应该怎么做才能确保cssClass（）具有更新的变量。感谢您的帮助！
export class TsdportalClientPartialHeaderNavComponent implements OnInit {
template:string="main";
headerNavButtonMain:string="btn btn-primary font-weight-bold";
headerNavButtonNews:string="btn btn-primary font-weight-bold";
headerNavButtonEntertainment:string="btn btn-primary font-weight-bold";
headerNavButtonSports:string="btn btn-primary font-weight-bold";
headerNavButtonBusiness:string="btn btn-primary font-weight-bold";
headerNavButtonSociety:string="btn btn-primary font-weight-bold";
headerNavButtonWellness:string="btn btn-primary font-weight-bold";
headerNavButtonFood:string="btn btn-primary font-weight-bold";
headerNavButtonTravel:string="btn btn-primary font-weight-bold";
headerNavButtonAutos:string="btn btn-primary font-weight-bold";
headerNavButtonMedia:string="btn btn-primary font-weight-bold";
constructor() {
var str = window.location.pathname;
this.template = str.slice(1);
this.cssClass(this.template);
console.log("(Main)",this.headerNavButtonMain);
console.log("(News)",this.headerNavButtonNews);
console.log("(Entertainment)",this.headerNavButtonEntertainment);
console.log("(Sports)",this.headerNavButtonSports);
console.log("(Business)",this.headerNavButtonBusiness);
console.log("(Society)",this.headerNavButtonSociety);
console.log("(Wellness)",this.headerNavButtonWellness);
console.log("(Food)",this.headerNavButtonFood);
console.log("(Travel)",this.headerNavButtonTravel);
console.log("(Autos)",this.headerNavButtonAutos);
console.log("(Media)",this.headerNavButtonMedia);
}
ngOnInit() {
}
cssClass(className:string){
console.log(className);
switch(className) {
case "main": {
//statements;
this.headerNavButtonMain="btn btn-primary font-weight-bolder bg-success";
break;
}
case "news": {
//statements;
this.headerNavButtonNews="btn btn-primary font-weight-bolder bg-success";
break;
}
case "entertainment": {
//statements;
this.headerNavButtonEntertainment="btn btn-primary font-weight-bolder bg-success";
break;
}
case "sports": {
//statements;
this.headerNavButtonSports="btn btn-primary font-weight-bolder bg-success";
break;
}
case "business": {
//statements;
this.headerNavButtonBusiness="btn btn-primary font-weight-bolder bg-success";
break;
}
case "society": {
//statements;
this.headerNavButtonSociety="btn btn-primary font-weight-bolder bg-success";
break;
}
case "wellness": {
//statements;
this.headerNavButtonWellness="btn btn-primary font-weight-bolder bg-success";
break;
}
case "food": {
//statements;
this.headerNavButtonFood="btn btn-primary font-weight-bolder bg-success";
break;
}
case "travel": {
//statements;
this.headerNavButtonTravel="btn btn-primary font-weight-bolder bg-success";
break;
}
case "autos": {
//statements;
this.headerNavButtonAutos="btn btn-primary font-weight-bolder bg-success";
break;
}
case "media": {
//statements;
this.headerNavButtonMedia="btn btn-primary font-weight-bolder bg-success";
break;
}
default: {
//statements;
break;
}
}
}
public HeaderNavButton = [
{
text: "main",
link: "/main",
id: "header-nav-button-main",
class: this.headerNavButtonMain,
},
{
text: "news",
link: "/news",
id: "header-nav-button-news",
class: this.headerNavButtonNews,
},
{
text: "entertainment",
link: "/entertainment",
id: "header-nav-button-entertainment",
class: this.headerNavButtonEntertainment,
},
{
text: "sports",
link: "/sports",
id: "header-nav-button-sports",
class: this.headerNavButtonSports,
},
{
text: "business",
link: "/business",
id: "header-nav-button-business",
class: this.headerNavButtonBusiness,
},
{
text: "society",
link: "/society",
id: "header-nav-button-society",
class: this.headerNavButtonSociety,
},
{
text: "wellness",
link: "/wellness",
id: "header-nav-button-wellness",
class: this.headerNavButtonWellness,
},
{
text: "food",
link: "/food",
id: "header-nav-button-food",
class: this.headerNavButtonFood,
},
{
text: "travel",
link: "/travel",
id: "header-nav-button-travel",
class: this.headerNavButtonTravel,
},
{
text: "autos",
link: "/autos",
id: "header-nav-button-autos",
class: this.headerNavButtonAutos,
},
{
text: "media",
link: "/media",
id: "header-nav-button-media",
class: this.headerNavButtonMedia,
}
]
}