The value is successfully stored in the component.ts file but is unable to be displayed on the

Question

The value is successfully stored in the component.ts file but is unable to be displayed on the

After successfully retrieving data and logging it in the console of the component.ts file, I encountered an issue where the data is not displaying on the template. My goal is to present the data in a table, but for now, I am attempting to show it within a

TAG

.

import { Component, OnInit } from '@angular/core';
import { CosterService } from 'projects/tradefigure-lib/src/lib/pages/blinkcoster/coster.service';

import { FormBuilder,FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
import { commodity, ICommodity } from 'projects/tradefigure-lib/src/lib/pages/blinkcoster/ICommodities.schema';

import { CrudtableService } from '../crudtable.service';

@Component({
  standalone: true,
  imports: [
   CommonModule,
   FormsModule,
   ReactiveFormsModule,
  ],
  selector: 'app-commodity',
  templateUrl: '
  
  ',
  styleUrls: ['./commodity.component.css']
})
export class CommodityComponent implements OnInit {
  // commodity: commodity = new commodity(); 
  commodity$!: ICommodity[];

  commoditys = this.commodity$
 
  isEditing: boolean = false
  title = 'crud';
  commodity: ICommodity [] = []
  constructor(
    private fb: FormBuilder, 
    private CosterService: CosterService,
    private crud: CrudtableService,
) { }

ngOnInit(): void {
  this.form;
  this.crud.getAll().subscribe({
    next: (res) => {
      this.commodity 
      console.log(res)
    }
  })
}

<div *ngFor="let commodity of commodity$ ">
  <p>{{commodity.offtalkerpriceOID}}</p>
  <p>{{commodity.commodityDescription}}</p>
  <p>{{commodity.unitPrice}}</p>
  <p>{{commodity.unitOfMeasure}}</p>  
</div>

I have attempted passing the data as an observable and utilizing the async pipe on the template without success.

The data is alerted and logged in the console, however, when using *ngFor to display it on the template, the template remains white.

If you have any solutions to this problem, please advise. Thank you!

angular typescript

Answer 1

Answer №1

~~It appears that the issue lies within the ngOnInit code block without further context.~~

The problem seems to be related to not correctly assigning the response value to the variable, causing it to show in the console (console.log(res)) but not reflect in the HTML (where this.commodity was used without assignment).

ngOnInit(): void { this.crud.getAll().subscribe(res => { this.commodity = res console.log(res); }) }
----------

There are two solutions to address this issue based on whether you prefer using the async pipe or not.

In both cases, the root cause remains linked to assignments in the ngOnInit method.

Using the async pipe:

TS code:

export class CommodityComponent implements OnInit {
  commodities$: Observable<ICommodity[]>;

  ngOnInit(): void {
    this.commodities$ = this.crud.getAll();
  }
}

This assigns the observable returned by this.crud.getAll() to the variable commodities$. The template uses the

HTML code:

<div *ngFor="let commodity of (commodity$ | async)">
  <p>{{commodity.offtalkerpriceOID}}</p>
  <p>{{commodity.commodityDescription}}</p>
  <p>{{commodity.unitPrice}}</p>
  <p>{{commodity.unitOfMeasure}}</p>  
</div>

The async pipe handles the subscription for us.

Without the async pipe.

TS code:

export class CommodityComponent implements OnInit {
  commodities: ICommodity[] = [];

  ngOnInit(): void {
    this.crud.getAll().subscribe(res => {
      this.commodities = res;
    })
  }
}

No need to manage the subscription since HTTP requests auto-complete upon completion.

HTML code:

<div *ngFor="let commodity of commodities">
  <p>{{commodity.offtalkerpriceOID}}</p>
  <p>{{commodity.commodityDescription}}</p>
  <p>{{commodity.unitPrice}}</p>
  <p>{{commodity.unitOfMeasure}}</p>  
</div>

Answer 2

~~It appears that the issue lies within the ngOnInit code block without further context.~~

The problem seems to be related to not correctly assigning the response value to the variable, causing it to show in the console (console.log(res)) but not reflect in the HTML (where this.commodity was used without assignment).

ngOnInit(): void { this.crud.getAll().subscribe(res => { this.commodity = res console.log(res); }) }
----------

There are two solutions to address this issue based on whether you prefer using the async pipe or not.

In both cases, the root cause remains linked to assignments in the ngOnInit method.

Using the async pipe:

TS code:

export class CommodityComponent implements OnInit {
  commodities$: Observable<ICommodity[]>;

  ngOnInit(): void {
    this.commodities$ = this.crud.getAll();
  }
}

This assigns the observable returned by this.crud.getAll() to the variable commodities$. The template uses the

HTML code:

<div *ngFor="let commodity of (commodity$ | async)">
  <p>{{commodity.offtalkerpriceOID}}</p>
  <p>{{commodity.commodityDescription}}</p>
  <p>{{commodity.unitPrice}}</p>
  <p>{{commodity.unitOfMeasure}}</p>  
</div>

The async pipe handles the subscription for us.

Without the async pipe.

TS code:

export class CommodityComponent implements OnInit {
  commodities: ICommodity[] = [];

  ngOnInit(): void {
    this.crud.getAll().subscribe(res => {
      this.commodities = res;
    })
  }
}

No need to manage the subscription since HTTP requests auto-complete upon completion.

HTML code:

<div *ngFor="let commodity of commodities">
  <p>{{commodity.offtalkerpriceOID}}</p>
  <p>{{commodity.commodityDescription}}</p>
  <p>{{commodity.unitPrice}}</p>
  <p>{{commodity.unitOfMeasure}}</p>  
</div>

The value is successfully stored in the component.ts file but is unable to be displayed on the

Answer №1

Similar questions

What's the most efficient way to define the type of an object in TypeScript when one of its properties shares the same name as the type itself?

Issue with webpack dev server not correctly generating output files to be included in index.html

After transitioning to standalone mode, Angular is unable to access the component before it has been

Establishing the root directory for imports in Angular 2

Using regular expressions, replace all instances of " " with ' ' based on certain conditions

What is the process for unsubscribing from an Apollo Observable in an Angular application?

Issue with Redis cache time-to-live not adhering to set expiration

The ASP.NET Core 3.0 Web API method consistently encounters null values

Delay the Ngrx effect by 2 seconds before initiating the redirect

Arranging an array of objects in Javascript based on the first attribute, and in cases of equality, sorting with another attribute

Encountering a challenge during the migration process from Angular 5 to Angular 6 in a .NET Core 2.1 project

Can React refs be safely accessed within a function wrapped with window.requestAnimationFrame?

"Upon clicking the login button, I encountered an issue with redirecting to the destination

Angular Resolver is producing a result of `undefined`

The default value is not displayed in the Angular dropdown menu

Is *ngFor in Angular 4 causing extra unnecessary cycles?

Implementing a stand-alone column filter that seamlessly integrates with the dynamic features of an ngx datatable in Angular versions 4 or 5 without

Guide to successfully submitting an Angular form that includes a nested component

Managing a project with multiple tsconfig.json files: Best practices and strategies

The number entered will be incorporated into the API URL key value by passing the variable from page.html to services.ts