Angular 4语义UI选项卡只有在我点击它们之后才能工作

Question

我在app.component.html中设置了一些语义UI选项卡，如下所示:

<div class = "ui container">
<h1>Header/h1>
<hr>
<div style = "background-color: rgb(194, 221, 240);" class="ui top attached tabular menu">
<a style = "font-size: large;" class="item active" data-tab="dtQuestions">Questions</a>
<a style = "font-size: large;" class="item" data-tab="dtAddNewQuestion">Add new question</a>
<a style = "font-size: large;" class="right item" data-tab="dtUserProfile">User profile</a>
</div>
<div class="ui bottom attached tab segment active" data-tab="dtQuestions">
<app-question-list [questions]="questions"></app-question-list>
</div>
<div class="ui bottom attached tab segment" data-tab="dtAddNewQuestion">
<app-create-question (questionCreated)="onQuestionCreated($event)"></app-create-question>
</div>
<div class="ui bottom attached tab segment" data-tab="dtUserProfile">
<app-user-profile></app-user-profile>
</div>
</div>

标签似乎不显示当我第一次打开页面,是空的,但当我点击特定标签的内容似乎开始出现一个接一个,如果它需要时间来加载,但只有在我点击特定选项卡,如果我不做,没有显示,我希望看到contenst初始化(立即当我打开页面选项卡的设置首先得到活跃)

我在app.component.ts中实例化了这些选项卡，像这样

export class AppComponent implements OnInit{
ngOnInit(): void {
$('.menu .item').tab();
}
public onQuestionCreated(question: Question): void {
this.questions.push(question);
}
}

写了上面的内容，我似乎不知道如何解决这个问题

Answer 1

我以前从未使用过Semantic UI，但你能试着删除"right"从"用户配置文件"如下所示

<a style = "font-size: large;" class="item" data-tab="dtUserProfile">User profile</a>

也看一下文档，我发现active选项卡的类应该如下所示

<div class="ui bottom attached active tab segment" data-tab="dtQuestions">
<app-question-list [questions]="questions"></app-question-list>
</div>  

希望以上两个选项对你有帮助。