Angular application that features a material table created using *ngFor directive and displayedColumns defined as an array

I am trying to create a table that displays columns with the format {key: string, display: string} where 'display' is the header and 'key' is used to display the value.

    <ng-container *ngFor="let col of displayedColumns">
      <th mat-header-cell *matHeaderCellDef> {{ renderHeader(col.display) }} </th>
      <td mat-cell *matCellDef="let element"> {{ element[col.key] }} </td>
    </ng-container>

However, I am encountering an error:

    UniversalTableComponent.html:2 ERROR Error: Could not find column with id "[object Object]".
    at getTableUnknownColumnError (table.js:890)
    at table.js:1973
    at Function.from (<anonymous>)
    at MatTable._getCellTemplates (table.js:1965)
    at MatTable._renderRow (table.js:1920)
    at table.js:1779
    at Array.forEach (<anonymous>)
    at MatTable._forceRenderHeaderRows (table.js:1774)
    at MatTable.ngAfterContentChecked (table.js:1251)
    at callProviderLifecycles (core.js:32324)
angulartypescriptangular-material

Answer №1

displayedColumns is a special type of data container that can only be used with the *ngFor directive when it is an array. If you need to access just the key within displayedColumns, try using element[displayedColumns.key] instead and do not use *ngFor.

Answer №2

Actually, you need two separate lists.

export interface ColumnaDataTable {
    columna: string;
    label: string;
}

  displayedColumns: ColumnaDataTable[] = [{ columna: 'clase', label: 'Clase' }];
  displayedColuXXX: string[] = [];
  
<mat-table [dataSource]="dataSource" matSort multiTemplateDataRows>
  <ng-container matColumnDef={{displayedColumn.columna}} class="make-gold"
    *ngFor="let displayedColumn of displayedColumns">
    <th mat-header-cell *matHeaderCellDef>{{displayedColumn.label}} </th>
    <td mat-cell *matCellDef="let element"> {{element[displayedColumn.columna] }} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColuXXX"></tr>
  <tr mat-row [ngClass]="{'make-gold': row.symbol == 'H'}" *matRowDef="let row; columns: displayedColuXXX;">
  </tr>
</mat-table>
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>

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

An issue arises with launching karma.js when importing node-openid-client in a TypeScript specification file

Utilizing the node-openid-client library for OpenIDConnect based authentication with an OpenID Provider. Encountering challenges while attempting to write test cases for the program. The application runs smoothly from node CLI, obtaining the code and toke ...

typescriptkarma-jasminenode-modulesopenid-connect

A common method for incorporating personalized react-scripts into create-react-app

After creating a project using create-react-app in TypeScript, I am looking to integrate custom react-scripts without ejecting. What is the most effective approach to achieve this? ...

typescriptcreate-react-appreact-scriptscustom-react-scripts

Unable to locate a type definition file for module 'vue-xxx'

I keep encountering an error whenever I attempt to add a 3rd party Vue.js library to my project: Could not find a declaration file for module 'vue-xxx' Libraries like 'vue-treeselect', 'vue-select', and 'vue-multiselect ...

javascriptnode.jstypescriptvue.js

issue with visibility of Angular Component

After following a straightforward YouTube tutorial for beginners on Angular, I encountered an issue. The tutorial covers how to use components, and even though I understand the concept well, the component simply does not appear no matter what I try. Here i ...

htmlangulartypescriptweb

Activate the mat-menu within a child component using the parent component

Incorporating angular 6 along with angular-material, I am striving to trigger the matMenu by right-clicking in order to utilize it as a context menu. The present structure of my code is as follows. <span #contextMenuTrigger [matMenuTriggerFor]="context ...

angulartypescriptangular-material

Deciding between a Component, Resolver, or Guard for redirecting authentication in Angular: Which middleware option is the

Incorporating an external authentication system into my Angular application is currently my focus, and I am determined to follow the most effective approach. The authentication process functions in such a way that upon successful authentication from a des ...

angular

Exploring Angular 2's Observable Patterns and Subscribing Techniques

Despite perusing various posts and documentation on the topic, I am still unable to grasp the concept of observables and subscribing to them. My struggle lies in updating an array in one component and displaying it in another component that is not direct ...

angularobservablesubscribe

Guide on mocking a function inside another function imported from a module with TypeScript and Jest

I have a function inside the action directory that I want to test: import { Action, ActionProgress, ActionStatus, MagicLinkProgress } from '../../interfaces' import { areSameActions } from '../actionsProgress' export const findActionPr ...

javascripttypescriptjestjsmocking

What issues arise from using ng-content within a web component?

I have a unique component structure for my website: <div (click)="popup.showAsComponent()"> <ng-content></ng-content> </div> Here is how I implement it: <my-web-component><button>Click!</button></my ...

angularweb-componentshadow-dom

Attempting to dynamically load an angular2 component upon the clicking of a tab has been my latest endeavor

Currently, I have multiple components loaded on page load within different tabs by using their selectors during design time. However, I am looking to dynamically load those components upon user demand, specifically when a tab is clicked. The issue arises ...

angularangular2-template

The Tools of the Trade: TypeScript Tooling

Trying out the amazing Breeze Typescript Entity Generator tool but encountering an error consistently. Error: Experiencing difficulty in locating the default implementation of the 'modelLibrary' interface. Options include 'ko', 'b ...

typescriptbreeze

Using mergeMap in conjunction with retryWhen allows for the resumption of retries from the exact point of failure, without needing

I have a list of URLs, the number of which is unknown until it stops (depending on some condition). This is how I am currently using them: from(observableUrls) .pipe( mergeMap(url => callHttpService(url) , 4), retryWhen( // Looking f ...

angulartypescriptrxjs

Ways to exit a loop in TypeScript

I've encountered an issue with the following code where I am struggling to break the loop under certain conditions. Desired Outcome: An error message should display, allowing the user to close it and remove the escalation node correctly. Actual Outc ...

angulartypescript

When you click, you will be directed to the specific details of the object

I have a recipe component that displays a list of recipes from my database and a recipe-detail component that should show the details of a selected recipe. What I aim to achieve is that when someone clicks on a recipe name, they are routed to the recipe-de ...

javascripthtmlangulartypescriptrxjs

Guide to setting the current slide in your ngx owl carousel using Angular

Looking for a solution to dynamically set an active slide based on index within a carousel. Attempted to apply the classes "active" and "center". The newsId variable in the example below is retrieved from another page and has been verified. <owl-carouse ...

angularowl-carousel

Unable to simulate axios instance in a Typescript environment

After reading through this particular article, I decided to attempt writing a unit test while simulating Axios (with Typescript). Incorporating an Axios instance to define the baseUrl. // src/infrastructure/axios-firebase.ts import axios from 'axios ...

reactjstypescriptjestjsenzyme

What is the reason behind `ngAfterViewChecked` and `ngAfterContentChecked` being invoked twice?

import { AfterContentChecked, AfterViewChecked, Component } from '@angular/core'; @Component({ selector: 'app-root', template: '' }) export class AppComponent implements AfterViewChecked, AfterContentChecked { ngA ...

angular

Is there a way to access a function or variable from within the scope of $(document)?

Whenever I attempt to utilize this.calculatePrice, it does not work and I am unable to access the external variable minTraveller from within the function. numberSpin(min: number, max: number) { $(document).on('click', '.number-spinner b ...

angulartypescript

Encountered an error with create-react-app and MaterialUI: Invalid hook call issue

I am encountering an issue while trying to set up Create-react-app with Material UI. The error message I receive pertains to Hooks. Could there be something else that I am missing? This is the specific error message being displayed: Error: Invalid hook ...

reactjstypescriptmaterial-ui

Encountered an error while trying to load a resource on ionic emulate

After successful testing in the browser, my app encounters an issue when emulating on an android emulator. It seems to be unable to load resources from the json-server hosted in my localhost, resulting in a "Failed to load resource" error message. To addr ...

angularcordova-pluginsionic2whitelist