Several arrays within the filteredData (MatTableDataSource) are being utilized

Hey there, I could really use some assistance. I have this data stored in a filteredData variable within a MatTableDataSource.

filteredData

My goal is to display this data in two separate tables, but I'm encountering issues where nothing is being shown.

Tables

In my component.ts file, I have the following:

    ngOnInit(): void {
        this.Groups();

    }

    Groups(){
        this.apiSvc.Cards().subscribe((rsp: any) => { 
            this.groups = rsp;

        });

        this.apiSvc.Cards().pipe(
            switchMap((rsp:any[])=>{

              return forkJoin(
                rsp.map(x=>this.apiSvc.Groups(x.id))
              )
            })
         ).subscribe((res:any[])=>{

            this.dataSource = new MatTableDataSource(res);
            this.dataSource.paginator = this.paginator;
            console.log(this.dataSource);
         })


Furthermore, here's what I've included in my component.html:

<table mat-table [dataSource]="dataSource" class="table employee-list no-wrap">
            
            <ng-container matColumnDef="#">
              <th mat-header-cell *matHeaderCellDef> ID </th>
              <td mat-cell *matCellDef="let element"> {{element.usersid}} </td>
            </ng-container>
</table>

My aim is to arrange the IDs based on the filteredData image order, potentially using ngFor for future data expansion, but I'm unsure how to accomplish this task.

Result

If anyone can provide guidance or assistance, I would be truly grateful. Thank you.

Answer №1

Every event is instantiating dataSource like this: this.dataSource = new MatTableDataSource(res);

Consider moving this to a constructor or NgOnInit method and updating your data on subscribe instead: .subscribe(list => this.datasource.data = list);

    Groups(){
    /* instantiate once */
    this.dataSource = new MatTableDataSource();

    this.apiSvc.Cards().subscribe((resp: any) => { 
        this.groups = resp;

    });

    this.apiSvc.Cards().pipe(
        switchMap((resp:any[])=>{
          return forkJoin(
            resp.map(x=>this.apiSvc.Groups(x.id))
          )
        })
     ).subscribe((result:any[])=>{
         /* fill your table here */
        this.dataSource.data = result;
        
        this.dataSource.paginator = this.paginator;
        console.log(this.dataSource);
     });

}

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

Sending the HTML input value to a Knockout view

Can someone assist me with a dilemma I'm facing? Within CRM on Demand, I have a view that needs to extract values from CRM input fields to conduct a search against CRM via web service. If duplicate records are found, the view should display them. Be ...

A guide on incorporating jQuery alert messages into Angular 2

Whenever I submit a form by clicking on the "send message" button, I want to display an Alert message using jQuery. However, currently, I have to double click for the alert message to appear. How can I make it so that the alert message is shown with just o ...

The FormGroup instance does not return any input method when using the get input function

I am facing an issue where a custom error message should only display if the input for foo is invalid. However, it seems like the line of code myForm.get('foo') is returning null. Below is the simplified version of component.html: <form [for ...

Changing the row property value of a textarea dynamically based on text input in ReactJS

Here is what I have tried: <textarea rows='2' onChange={e => setSomething(e.target.value)} className='form-control text-area ' value={something} placeholder='write something'> </textarea> output: Expected ...

Having trouble locating the module while importing MP3 files in a React project

UPDATE The issue stemmed from my limited understanding of the environment I was working in, but the responses provided below may be helpful for others facing similar challenges. EDIT: It appears that there is a problem with trying to import an mp3 file in ...

Angular 6 offers a dynamic auto complete feature that enhances user

My Angular app has auto-complete functionality enabled. I am using ngFor to iterate over an array of objects and passing the index of the object array to a function for some operations. Below is the code snippet I have tried: template.html <mat-form ...

Challenges encountered when unit testing ngx-translate

0 I am encountering issues with unit testing while using the ngx-translate library. Despite adding a provider for TranslateService, the tests keep asking for more providers, creating an endless loop of dependencies. Specifically, I am trying to unit test ...

Contrasting @Input with Dependency Injection in Angular 10

Is there a way to pass values from a parent component to a child component without using the @Input decorator? I'm thinking about creating an instance of the Parent class in the constructor (Dependency Injection) and then accessing the variable value ...

Maintaining the selected option on page refresh with React Remix

I have a dropdown menu with 2 choices (en, no) for switching the language when onChange event occurs. To save the selected language, I am using localStorage. Due to the server-side rendering in Remix, direct access to localStorage is not possible. Therefo ...

Traversing through JSON objects in Angular 2

I am currently facing an issue while trying to iterate through a JSON object. Below is the sample JSON data: floors.ts this.floors= [ { floorName: "floor 1", result: [ { resFloor: "1", ...

React with TypeScript: The struggle of getting LocalStorage to work

Currently, I am dealing with persistence in a todo application developed using React and TypeScript. To achieve the desired persistence, I have implemented localStorage. Allow me to share some code snippets: const [todos, setTodos] = useState<todoMod ...

Broaden your interfaces by implementing multiple interfaces with Zod

Utilizing typescript, I am able to incorporate multiple interfaces interface Name { name: string } interface Age { age: number } interface People extends Name, Age { height: number } Is there a similar way to achieve this with Zod? What I attempted ...

Having trouble getting a local npm installation to work from a specific file path?

After following the instructions from this helpful link to install an npm package through a file path, I encountered an error when attempting to use it: Cannot find module '<module_name>' or its corresponding type declaration Are there an ...

Guide to adding a class to dynamically generated Angular Material elements

Regarding a previous discussion on Stackoverflow, where there was an attempt to target the dynamically rendered Angular Material component class cdk-overlay-container through a class selector using a directive. The main objective was to add a specific clas ...

Conceal or remove disabled years in Angular Material datepicker

I previously disabled years prior to 2018, but now I would like to hide or delete them. The year selection range currently starts from 1998, but it should begin at 2018 instead. Is there a way to display only 3-4 years instead of the current 24-year rang ...

Despite being listed in the entry components, HelloComponent is not actually included in the NgModule

Check out my StackBlitz demo where I am experimenting with dynamically instantiating the HelloComponent using the ReflexiveInjector. The HelloComponent is added to the app modules entryComponents array. Despite this setup, I am still encountering the foll ...

Converting Mat-Raised-Button into an HTML link for PDF in Angular 6 using Material Design Library

Greetings, I have a couple of interrelated inquiries: Upon clicking the code snippet below, why does <a mat-raised-button href="../pdfs/test.pdf"></a> change the URL (refer to image 4) instead of opening test.pdf in a new window? If I have a ...

The program abruptly shut down with error code 127. Any idea why this occurred?

I'm having issues while attempting to create an app from a script. When I run "ionic serve," the following errors occur: [error] Error: Job name "..getProjectMetadata" does not exist. at Observable._subscribe (C:\Users\Bhanu\Desktop&bs ...

Buffer Overflow - Security Audit - Node JS TypeScript Microservice Vulnerability Scan Report

Person Data Schema: import JoiBase from '@hapi/joi'; import JoiDate from '@hapi/joi-date'; const Joi = JoiBase.extend(JoiDate); const personDataSchema = Joi.object().keys({ person: Joi.object().keys({ personId: Joi.string().max( ...

An extensive array of consequences and impacts tailored for a particular entity

As my Angular application continues to grow in size, the number of actions and effects also increases. How should I manage the growing action/effect files for a specific entity? I have attempted to separate actions into multiple files, but encountered an ...