What is the best way to anticipate a formal announcement?

Hey there! I'm trying to set options for my Datatable and add a new field in my objects, but I need to await the completion of these dtOptions. How can I achieve this in the ngOnInit lifecycle hook?

export class MyDashboardComponent implements OnInit {
  grades: any = [];
  dtOptions: DataTables.Settings = {};
  buffer: any = "";

  constructor(private apiService: ApiService, private _auth: AuthService, private http: HttpClient) {
  }

  async ngOnInit(): Promise<void> {
    this.dtOptions = {
      order: [[0, "desc"]],
      responsive: true,
      pagingType: 'full_numbers',
      pageLength: 2,
      serverSide: true,
      processing: true,
      ajax: (dataTablesParameters: any, callback) => {
        this.http
          .post<DataTablesResponse>('http://localhost:4000/grade/readByStudentId', {
            login: this._auth.getUserData().login,
            dataTablesParameters
          }).subscribe(resp => {
          this.grades = resp.data;
          callback({
            recordsTotal: resp.recordsTotal,
            recordsFiltered: resp.recordsFiltered,
            data: []
          });
        });
      },
      columns: [{data: 'id'}, {data: 'firstName'}, {data: 'lastName'}]
    };

    await this.grades.forEach(grade => {
      this.getTpName(grade.tp_id)
        .pipe(take(1))
        .subscribe(tpName => {
          grade.push({tpName : tpName});
        });
    });
  }

Answer №1

To incorporate the desired functionality after the post functions, place it within the subscribe() method of the post function.

Ensure that the code below is relocated inside the subscription block following the line where you assign the grades value:

this.grades.forEach(grade => { this.getTpName(grade.tp_id) .pipe(take(1)) .subscribe(tpName => { grade.push({tpName : tpName}); }); });

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

Facing issues with Angular2 integration with Semantic UI

I am currently working with Angular2 and Nodejs. Within my application, I have a list of employees that includes their names, addresses, ranks, and other details. My goal is to display additional information when a user hovers over an employee's name. ...

Mastering the art of navigating through intricate nested properties within JSON data structures

Presented below is a dynamic JSON structure: data = { "name": "deltha", "type": "object", "important": [ "name", "id", "number" ], "information": { "place": { "editable": false, "visible": true }, "info": { ...

Error: Bitbucket pipeline does not have the necessary permissions to complete the operation

I encountered an error while building ng build on Bitbucket. My backend is Firebase. Can you help me figure out what I'm doing wrong? EPERM: operation not permitted, lchown '/opt/atlassian/pipelines/agent/build/node_modules/.cache/angular-buil ...

The latest version of IntelliJ Idea Ultimate, 2023.2.5, does not offer compatibility with the updated control flow features in Angular

I recently made the switch to Angular 17 in my project and noticed that Idea is not recognizing the new syntax in HTML templates. <mat-menu #menu="matMenu"> @for (menuItem of getData().menu.items; track menuItem) { & ...

Angular error: Attempting to create a property on an empty string using Rxjs

Currently, I am working with Angular 11 and using rxjs. I am trying to filter my course collection to show only courses with the category "frontend," but I am encountering some errors. Here is my code: getPosts():Observable<ICourses[]> { return ...

Utilize the ng.IFilterService interface within a TypeScript project

I am facing an issue with a .ts file that contains the following code: module App.Filters { export class SplitRangeFilter implements ng.IFilterService { static $inject = ['$filter']; public static factory(): Function { ...

I am encountering difficulties with generating images on canvas within an Angular environment

I am trying to crop a part of a video that is being played after the user clicks on it. However, I am encountering the following error: ERROR DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may no ...

Is it feasible to trigger a selector element in Angular 2 upon clicking another element?

I want to trigger the Angular2 Material Datepicker's calendar popup by clicking on another element on the page. More specifically: <material-datepicker> </material-datepicker> should be triggered when a specific text is clicked: <p&g ...

Creating a backup link for a video player component in NextJs

My aim is to make sure that two video player components in a NextJS application can still access and play videos even when the application is running locally using npm run dev without an internet connection. Currently, these two components.. <HoverVi ...

Is there a kind soul out there who can shed some light on the error that pops up when I try to execute "npm run

As I embark on creating my first angular app, I started by installing it using the command npm i -g @angular/cli. However, when I attempt to create a new app with npm run ng new app, an error pops up: npm ERR! path E:\ddii\package.json npm ...

Running AngularJS within an Angular 8 application using ngUpgrade is not supported

Struggling to get my Hybrid Angular application up and running using ngUpgrade according to the documentation. The issue is that no matter what tweaks I make, AngularJS just won't cooperate. When I combine Angular and AngularJS, both applications wor ...

Overlooking errors in RxJs observables when using Node JS SSE and sharing a subscription

There is a service endpoint for SSE that shares a subscription if the consumer with the same key is already subscribed. If there is an active subscription, the data is polled from another client. The issue arises when the outer subscription fails to catch ...

The deployment on Vercel for a Node Express and TypeScript project is experiencing issues with building

After uploading my project with node using express + typescript, I encountered a problem. The app generates a folder called dist for building, but when vercel deployed my app, it didn't run the build command. To resolve this issue, I had to manually b ...

Ways to generate arrays in Typescript

My dilemma lies in a generator method I've created that asynchronously adds items to an array, and then yields each item using yield* array at the end of the process. However, TypeScript compiler is throwing me off with an error message (TS2766) that ...

Steps for customizing the text representation of an object:

In my reactive form component, I have an input control attached to a formGroup. Let's consider this object: {Id: 1, Text: "some text here..."}. Just like a select or dropdown menu, I want to display the 'Text' part in the input field but sub ...

How to disable the first option in an Angular 2 select dropdown

I'm working with a select component, and here is the code snippet I have: <select name="typeSelection" materialize="material_select" [(ngModel)]="trainingplan.type" > <option [ngValue] = "null" disabled selected>Please choose a ...

How can we transform the `toUSD(amount)` function into a prototype function?

This function is functioning perfectly as intended. function toUSD(amount): string { // CONVERT number to $0.00 format return new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(amount); }; Here is how I currently i ...

Images with spaces in their names are failing to load in React Native

I am currently trying to utilize an image within my react native application. At this point, my code is very minimal. The following code snippet is all I have for now: import React from 'react'; import { ScrollView, View, Text } from 'reac ...

What is the correct way to invoke a function from an external JavaScript file using TypeScript?

We are currently experimenting with incorporating Typescript and Webpack into our existing AngularJS project. While I have managed to generate the webpack bundle, we are facing an issue at runtime where the program is unable to locate certain functions in ...

the hidden input's value is null

I am encountering an issue with a hidden input in this form. When I submit the form to my API, the value of the input is empty. Isbn and packId are both properties of a book model. However, for some reason, the value of packId is coming out as empty. & ...