Question

我有两个div，我必须根据我得到的响应隐藏或显示。比如说

<div *ngIf= "field1 != null ">
  <p>field1 </p>
</div>
<div *ngIf= "field2 != null ">
  <p>field2 </p>
</div>

我的回答是

{
  " field1" : "Field1" ,
  " field2" : null ,

}

根据我的回复，只有我的field1可见。我想知道有没有更好的方法。如果将来如果响应发生变化，我必须在任何地方更改HTML。我可以概括一下吗？

Answer 1

组件：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  response = {
    "field1": 1, 
    "field2":null, 
    "field3": "foo", 
    "field4": 42,
    "field5": undefined
  };
  responseProperties = [];
  ngOnInit() {
      //In here for demo purpose.
      //Put this code after getting the "response"
      for(let propertyName in this.response) {
           let value:any = this.response[propertyName];
           if(value || value === false)
           this.responseProperties.push({propertyName, value});
      }
  }
}

相关模板：

<div *ngFor="let p of responseProperties">
  <p>{{p.propertyName}}: {{p.value}}</p>
</div>

结果：

field1：1

field3：foo

field4：42

Answer 2

如果你写*ngIf="field1"会更好，因为如果它是undefined ,null, 0，它将被视为false（数字类型为0）。否则，如果它包含任何内容，则将其视为true。

Answer 3

如果你只想显示一个字段，那么* ngIf语句就能正常工作。添加绑定到您的＆lt; p>标签将确保字段属性随着所做的任何更改而动态更新。

像这样：

<div *ngIf="field1 !== null ">

  <p>{{field1}}</p>

</div>

<div *ngIf="field2 !== null ">

  <p>{{field2}}</p>

</div>

这将保持这一点

如果该字段存在，则相应的＆lt; div>将会显示

div的内容将绑定到相应字段变量的值，这意味着如果响应发生更改，则不必更新html。

Angular使用其更改检测算法不断更新html中的* ngIf和{{}}标记。如果您想了解有关其工作原理的更多信息，请参阅以下文章解释其工作方式：https://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html

更好的启用div的方法

3 个答案: