启用div的更好方法

Question

I have two divs which I have to hide or display based on the response I get . For instance say

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

And my response will be

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

}

Based on my response only my field1 will be visible. I want to know is there any better way of doing it . In case in future if the response get changed I have to change in HTML wherever it is referred. Can I may it generalized ??

Answer 1

The component:

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});
      }
  }
}

The associated template:

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

The result:

field1: 1

field3: foo

field4: 42

Answer 2

It will be better if you write *ngIf="field1" because if it will be undefined ,null, 0 it will be treated as false (0 of number type). Else if it contains anything it will be treated as true .

Answer 3

If you only want to display a field if it exists, then the *ngIf statements will work fine. Adding bindings to your < p > tags will make sure that the field properties update dynamically with any changes made.

Like so:

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

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

</div>

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

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

</div>

This will maintain that

if the field exists, the corresponding < div > will be shown

the content of the div will be bound to the value of the corresponding field variable, meaning that if the response changes, you won't have to update the html.

Angular continuously updates the *ngIf's and {{}} tags in the html using its change detection algorithm. If you'd like to understand more about how this works, here is an article that explains the way it works: https://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html