Question

我想知道当我必须显示一些来自http调用的文本/表单时，我必须使用此指令<div *ngIf="show">Text to show</div>。我知道如果我不使用它会给我一些错误，如：

var a未定义

因为当我显示html时，变量绑定并不包含任何值。但这是最佳做法吗？在有这样的情况的时候总是必要的吗？还有更好的方法吗？

Answer 1

您可以使用您在HTML模板中绑定的一些初始默认值来定义变量。请参阅官方文档https://angular.io/api/common/NgIf。如果您有任何进一步的询问，请告诉我。

Answer 2

当HTML加载到页面上时，Text to show的值将是未定义的，因为HTTP调用可能不会返回您设置它的响应。

当HTTP调用返回时，然后您设置Text to show，它不再是未定义的，可以用HTML显示。

所以这里有两个选择：

将Text to show设置为默认值，即使＆＃34;＆＃34;如果你喜欢。当HTTP调用返回时，然后覆盖此值，角度绑定将更新视图。
使用* ngIf指令，告诉angular不要渲染HTML（因此不需要那些未定义的变量）。如果页面上有多个依赖于HTTP调用的变量，这将非常有用。一旦调用全部返回您需要的数据并设置了所有变量，您就可以将变量show设置为true，从而允许HTML呈现并显示变量。

我通常最终得到的是showPage变量和a 页面的html上的<div *ngIf="showPage"></div>包装器。当我拥有页面所需的所有数据时，我将showPage设置为true。

Answer 3

ngif表达式结果值不仅仅是布尔值true或false

但它将是您可能想要轻松引用的对象值。

  things = {
 car: 'Honda',
 shoes: 'Nike',
 shirt: 'Tom Ford',
 watch: 'Timex'
 };

典型用法：如果“事物”存在，则显示“有事物”。如果“事情”未定义。什么都不显示'things'可以是boolean true / false，'things'可以是任何其他类型，可以只是一个对象的变量。

<div *ngIf="things">
     there is things
 </div>

例如：

 <div *ngIf="things.car; else noCar">
  Nice car!
 </div>

<ng-template #noCar>
   Call a Uber.
</ng-template>

 <!-- Nice car ! -->

anthoer示例：

<div *ngIf="things.car; let car">
   Nice {{ car }}!
 </div>
<!-- Nice Honda! -->