The html of a component is not display

Ionic Framework ionic-v3
1

Hi,

I created an ionic3 application.
I created a component.
I created a data list in the storage.
When I retrieve the list with a promise and i loop in it to display the components, i don’t see the component list.
In the log file, the code of component class is executed but the html is not displaying.

Could you please help me with yours ideas ?

Thanks in advance,
Thierry

2

I think the problem might be somewhere around line 12.

1 Like
3

The problem is not in the component because when I put the data in hard, the component works. It is the raison, I didn’t show the code but i can :slight_smile:

1 Like
4

That would be great.

1 Like
5

Code of the component

<!-- Generated template for the DisplaySimpleInfoComponent component -->
<div class=“inner-shadow-ex” >
<button class=“button” (click)=“update()” > * </button>
{{label}}: {{value}} {{unit}}
</div>

import { Component, Input, OnInit } from ‘@angular/core’;
import { RestProvider } from ‘…/…/providers/rest/rest’;

/**

  • Generated class for the DisplaySimpleInfoComponent component.
  • See https://angular.io/api/core/Component for more info on Angular
  • Components.
    */
    @Component({
    selector: ‘display-simple-info’,
    templateUrl: ‘display-simple-info.html’
    })
    export class DisplaySimpleInfoComponent {
    @Input() label: string;
    @Input() idAction: string;
    @Input() unit: string;
    value: any;
    constructor(public restProvider: RestProvider) {
    }
    ngOnInit() {
    console.log('DisplaySimpleInfoComponent ngOnInit() Component ’ + this.label + ’ / ’ + this.idAction);
    this.getInfo();
    }
    update() {
    console.log(‘DisplaySimpleInfoComponent update() info()’);
    this.getInfo();
    }
    getInfo() {
    console.log(‘DisplaySimpleInfoComponent getInfo() in display-simple-info.ts’);
    this.value = ‘…’;
    this.restProvider.getInfos(this.idAction)
    .then(data => {
    this.value = data;
    console.log(this.value);
    });
    }
    }
1 Like
6

It might also help to see the code of the incorporating parent component, but I think I see your proximate problem.

The place you want to be calling getInfo() from is not ngInit (I don’t know what the timing is on update). The only place you can rely on Input() properties being set and stable is in ngOnChanges.

7

In my page

<display-simple-info
  *ngFor="let param of params"
  idAction="{{param.idAction}}"
  label="{{param.label}}"
  unit="{{param.unit}}">
</display-simple-info>

refreshParams() {

this.storeProvider.getList().then(
  (val) => {
    console.log('this.paramsMap=' + this.paramsMap);
    if (!this.paramsMap) {
      this.paramsMap = val;
      console.log('params size=' + this.paramsMap.size);
      alert('params size=' + this.paramsMap.size);
      this.paramsMap.forEach((value: string, key: string) => {
        console.log(key, value);
        alert('key=' + key + ' value=' + JSON.stringify(value));
      });
      this.params = this.paramsMap.values();  
    } else {
      console.log('params no change');
    }
  }
);

}

8

I forgot (Sorry, I take up the problem again): from time to time, I see the html of the component displayed and disappear immediately. It’s like, there are actions in conflict.

I tested the method ngOnChanges but it is the same result :frowning:

9

Which of the following scenarios more accurately describes what you see? Assume that storeProvider always returns a list of 3 items.

A. I see 3 instances of DisplaySimpleInfoComponent, and then they all completely vanish at once out of the DOM.
B. I see 3 instances of DisplaySimpleInfoComponent, and while they stay in the DOM, their contents become blank.

Are there any other places where the page’s params property is modified?

10

It is the scenario A.

The params property is modified just in the code that I showed you

11

If they’re completely coming out of the DOM, then I would think that somehow params is getting reset to an empty list. Is that conceivable?

12

Humm, it is possible. But I don’t know the code who do that…