Angular 4更改布局答案

【问题标题】：Angular 4 change layoutAngular 4更改布局
【发布时间】：2018-02-25 23:43:41
【问题描述】：

我有这两种布局：

<div *ngIf="!loginPanel" class="login1">
<a (click)="showLoginPanel()">Login</a>
</div>

<div *ngIf="loginPanel" class="login2">
<input type="text" placeholder="user">
<input type="password" placeholder="placeholder">
</div>

和打字稿：

public loginPanel: boolean;

  constructor() { }

  ngOnInit() {
    this.loginPanel = false;
  }

  showLoginPanel() {
    this.loginPanel = true;
  }

事实上，当我点击登录时，第一个 div 消失了。但第二个 div 不会取代第一个。有人知道如何正确执行此操作吗？

【问题讨论】：

当你点击登录时，它会从 dom 中删除按钮并添加表单视图。
但这并没有发生，只删除了第一个 div。

标签： html angular typescript

【解决方案1】：

你可以使用其他的 ngif

<div *ngIf="!loginPanel; else loginForm" class="login1">
    <a (click)="showLoginPanel()">Login</a>
</div>

<ng-template #loginForm>
    <div class="login2">
      <input type="text" placeholder="user">
      <input type="password" placeholder="placeholder">
    </div>
</ng-template>

【讨论】：

在您的代码中出现两个 div。应该是第一个还是第二个

【解决方案2】：

我解决了这个问题。 else div 应该是 ng-template ......所以，现在它可以工作了。还是谢谢

【讨论】：