Angular print a simple text in html

Question

I have this json

[
  {
    "id": 3,
    "name": "Test",
    "activityDays": 2,
    "coreBankingBranch": "master",
    "csrBranch": "master",
    "adminBranch": "master",
    "clientBranch": null,
    "creationDate": null,
    "serverName": "ATP",
    "cloneTag": null,
    "csrIsCompleted": false,
    "adminIsCompleted": false,
    "clientIsCompleted": false,
    "completed": false
  }
]

That I get from:

Component

 this.docker.getContainers().subscribe(containers => {
  console.log(containers);
});

Service

 getEnvironments() {
return this._http.get(this.baseUrl + "/environments", this.options);
}

And I try to print using

<tr *ngFor="let environment of environments">
      <td>{{ environment.name }}</td>
    </tr>

but I get

EnvironmentComponent.html:79 ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only

supports binding to Iterables such as Arrays.

where is your environments array located? you need to do something like this to start with: ` getEnviroments() { this.enviroments = this._http.get(this.baseUrl + "/environments", this.options); }` — Patricio Vargas, May 15 '18 at 15:40
https://stackoverflow.com/questions/43998092/angular-cannot-find-a-differ-supporting-object-object-object-of-type-obje/43998189 — Amit Chigadani, May 15 '18 at 15:41
@user9793665 is your environments is an array type? E.G. `[{name:'name 1'}, {name:'name 2'}]` — Robin, May 15 '18 at 16:27
@user9793665 Just bind environments array to the subscribes result. `this.environments = containers` — Abel Valdez, May 15 '18 at 20:53

score 0 · Answer 1 · answered May 15 '18 at 15:41

0

Seems you have not bind environments with the response. Also have to initiate the environments in the component

this.docker.getContainers().subscribe(containers => {
  this.environments = containers  // assuming container is the shared response 
});

answered May 15 '18 at 15:41

brk

48,835
10
56
78

what type is this.environments? I don't want to create a class in the frontend and backend.. Can it be Object[] ?? – May 15 '18 at 15:42
If you are unsure just make it as `any` type. Also you can skip the `type`, just declare as empty array like `environments =[]` – brk May 15 '18 at 15:45

Angular print a simple text in html

1 Answers1