Issue - The NgFor directive is designed to only bind to Iterables like Arrays

I am attempting to showcase an array as options in a dropdown menu, but I keep encountering the following error:

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

The HTML code I am using is:

<mat-option *ngFor="let type of exportTemplates" value="{{ type.id }}">
    {{ type.label }}
 </mat-option>

Here is how the array looks: https://i.sstatic.net/yg7Q1.png

This is my TypeScript code:

exportTemplates = [];
const subs = this.configService.state$.subscribe((config: any) => {
            this.exportTemplates = config.templates.types;
        });
        this.subscription.push(subs);

Answer №1

Is merging all the items in an array something you're interested in?

list.map(item => Object.keys(item).map(key => item[key]))[0]

If you'd like to see an example, I've created a Stackblitz Demo for you to check out.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for resolving aliases in tsconfig.app.json when dealing with multiple source directories in WebStorm

When it comes to generating source files, I do things a bit differently and create some of them outside of the usual src directory. Here's how my structure looks: - project - generated - $ui-services some-other.service.ts - src - ...

Angular paginator encountered an issue while attempting to parse the template

I'm updating my data list to include pagination, and everything seems fine with retrieving data and sorting. However, when I add the paginator tag to my template, Angular shows me an error: ERROR in Errors parsing template: Unexpected closing tag " ...

Resetting Laravel passwords without relying on user emails, with the additional use of Angular for the front end interface

I'm currently working on a laravel-angular application that requires a password reset feature. However, the default password-reset in Laravel relies on email verification, which is not necessary for this particular application. I tried setting $confir ...

Having trouble with the Angular router link suddenly "failing"?

app.routes.ts: import { environment } from './environment'; import { RouterModule } from "@angular/router"; import { ContactUsComponent } from './static/components/contact-us.component'; import { HomeComponent } ...

Explore the functionality of a TypeScript-created Vue component by testing it with Vue-test-utils

In my attempt to validate props with various data types in a Vue component (built using TypeScript), I utilized the Vue-test-utils package. Despite implementing expect().tobe(), there remains an untested line: DropDownList.vue <template> <v-sel ...

Remove an item from an array within Express using Mongoose

{ "_id": "608c3d353f94ae40aff1dec4", "userId": "608425c08a3f8db8845bee84", "experiences": [ { "designation": "Manager", "_id": "609197056bd0ea09eee94 ...

How do I convert the object value/data to lowercase in JavaScript using underscore for an HTML5 document?

I am working with an array of objects (arr) where each object consists of 3 properties (Department, Categories, ProductTypes). The values for these properties are a mix of upper and lower case. To perform a comparison between arr and a search filter (alrea ...

Angular Tip: Display data in a dropdown using a select element

When I have two select elements and want to display values if they exist: page.ts import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app ...

Weekday Filter in Angular 2

Looking to utilize the date pipe feature in Angular 2, specifically aiming for output that only includes the weekday name, such as "Wednesday." I am aware of the typical method to achieve this: {{ strDate | date :'fullDate' }} This would resul ...

Toggle the visibility of a modal in code across various components in an Angular 4 project using Typescript

As I was working on my university App, I encountered an issue while attempting to open a Bootstrap modal in code from a different component. Opening a component in code from the same component posed no problems for me as I use JQuery and it functions perfe ...

What is the process for dynamically loading a component by its name in Angular 2?

I am currently incorporating dynamic loading of angular components in my application by using the following code snippet. export class WizardTabContentContainer { @ViewChild('target', { read: ViewContainerRef }) target: any; @Input() TabCont ...

Extract 'events' from a list or DataFrame

My dataset contains rainfall values binned into one-hour intervals, stored either as an array or a dataframe depending on convenience. The dataset consists of approximately 7000 rows and 11 columns, with some NaN values that must be retained. I understan ...

Encountering an Angular error while trying to use the command "npm run dev:ssr" to observe server-side rendering on the localhost

When I run this command, it starts listening on port 4200 but the page keeps loading without ever fully loading and shows this error in the command prompt: Unhandled Promise rejection: connect ECONNREFUSED 127.0.0.1:6379 ; Zone: <root> ; Task: Promis ...

Fixing Angular 2 Observable subscription issues with parameters and dependency injection

I'm facing an issue with Observable in my Angular project. The problem arises when I subscribe to both route params and services. I am encountering an error in the views that says: Cannot read property 'posts' of undefined Interestingly, ...

What exactly does "tsc" stand for when I compile TypeScript using the command "(tsc greeter.ts)"?

What does tsc stand for when compiling TypeScript code? (tsc greeter.ts) tsc I'm curious about the meaning of tsc in this context. ...

Does it make sense to start incorporating signals in Angular?

The upcoming release, as outlined in RFC3, will introduce signal-based components with change detection strategy solely based on signals. Given the current zone-based change detection strategy, is there any advantage to using signals instead of the tradi ...

Finding the right spot to apply CSS styles in a data table can be a tricky task

I need to use angular-ngStyle to apply CSS styles on Table data. The logic is set up: "When the table width is less than 1250px, apply certain CSS styles". Here is the code for that: export class NanoTableComponent { /** * This function checks the table ...

"Why is it that the onChange method of the antd table does not return an array of numbers for selectedRowKeys

In my current project, I am working on a Nextjs application that utilizes typescript and antd. The application includes a table component from antd which allows users to select rows. const rowSelection = { onChange: (selectedKeys: any[], selectedRows: M ...

Exploring the new possibilities of Angular 5: Enhanced REST API service with paginated data and object mapping capabilities

After implementing pagination in my REST API backend, I now need to update my Angular services to accommodate the changes. Instead of simply returning an array of objects, the API will now return JSON responses structured like this: { "count": 0, ...

What is the process for including the 'Access-Control-Allow-Origin' header in all responses?

Exploring the world of web development, I have started learning play framework for my backend using play 2.8.x framework and for frontend development, I am utilizing angular 8. However, I have encountered an issue while trying to retrieve a response from t ...