Question

我有一个Angular（v4.1.1）应用程序，它在我的表单条目组件的许多地方使用*ngIf来显示/隐藏用于新建，编辑或只读模式的元素。当我测试时，我发现由于等待数据返回而有时需要几秒钟来呈现表单。这导致最初显示的某些内容不应该存在。

以下是HTML的一个小例子：

<div class="col">
  <h1>{{list.displayName || 'Create New List'}}</h1>
  <p *ngIf="isNew" class="text-muted">Complete the form below and click 'save'</p>
</div>
<div id="toolbar" class="col">
  <div class="text-right">
    <button *ngIf="!editMode" (click)="cancel()" class="btn btn-outline-warning clickable">Close</button>
    <button *ngIf="editMode" (click)="cancel()" class="btn btn-outline-warning clickable">Cancel</button>
  </div>
</div>

我的问题是处理表单状态的最佳方法是什么？是否更好地为每个状态设置一个单独的组件，以便渲染更快且特定于操作？但这种方式似乎有很多重复。

Answer 1

使变量false处于开始状态，然后根据结果将其更改为true或false。所以事情最初不会显示

例如，

将editMode初始化为false。

这是一个例子（专家），

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `<h1>{{title}}</h1>`,
})
export class AppComponent implements OnInit {
  editMode = false;
  constructor() { }

  getMode(): void {
    this.Service.getMode().then(mode => if(mode == 'edit'){ editMode = true} else { editMode = false });
  }
  ngOnInit(): void {
    this.getMode();
  }

}

渲染不同组件状态时，Angular 2/4 * ngIf性能变慢（新建，编辑，读取）

1 个答案: