我正在制作一个应用程序,该应用程序需要可供没有帐户的用户访问,但是一旦有人创建帐户,他们就需要能够看到其他功能并且它也需要响应。
对于响应性,我使用 材料设计作为引导和角度材料mdbootstrap。在下面的示例中,我想将 mdb-col-size 从 9 更改为 12,具体取决于用户是否登录,因此不显示 save,... 选项。
<div>
<div class="row ">
<div class="col-lg-9 col-md-8 col-sm-6 ">
<div class="row ">
<div class="col-md-12 mb-12">
<div class="card testimonial-card ">
<div class="card-up lighten-1 ">
<div class="card-body">
<h4 class="card-title">{{ dare.title }}</h4>
<hr />
<p>{{ dare.description }}</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6"><!--this shouldn't be displayed when someone is not logged in-->
<div class="row">
<div class="col-12">
<button mat-raised-button class="btn btn-block">
Save
</button>
</div>
</div>
<br />
<div class="row">
<div class="col-12">
<button mat-raised-button class="btn btn-block">
Challenge someone else
</button>
</div>
</div>
<br />
<div class="row">
<div class="col-12">
<button mat-raised-button class="btn btn-block">
Create new ...
</button>
</div>
</div>
</div>
</div>
<br />
</div>
我希望只有在有人登录并且响应能力相应改变时才能看到这些选项。
提前谢谢你!