Having issues with my *ngFor loop in Angular 11. Any assistance in resolving this problem would be greatly appreciated

Utilizing *ngFor, I am sending an array from typescript to the HTML page.

kitUser: any=[];
  constructor(private service: AdminService) { }
  
  ngOnInit() {
    this.service.getKSignUps().subscribe(res=>{
      this.kitUser=res;
      console.log(this.kitUser);
    });
  }

On the HTML page,

<tr *ngFor="let item of kitUser ">
        <td>
          {{ item.kitchenName }}
        </td>
        <td>
          {{ item.kitchenNumber }}
        </td>
        <td>
          {{ item.kitchenEmail }}
        </td>
        <td>
          {{ item.kitchenPassword }}
        </td>
        <td>
          {{ item.kitchenAddress }}
        </td>
        <td>
          {{ item.kitchenDescription }}
        </td>
</tr>

However, I am encountering an issue where nothing is being displayed on the browser. After trying various solutions, it seems that my *ngFor directive is not working properly. I would appreciate any guidance on resolving this issue. Thank you.

Answer №1

If none of the suggestions above worked, you can try the following solution:

export class KitchenUser {
kitchenName!: string;
kitchenNumber!: string;
kitchenEmail!: string;
kitchenPassword!: string;
  kitchenAddress!: string;
  kitchenDescription!: string;
}
 kitchenUsers!: KitchenUser [];
  constructor(private service: AdminService) { }

  ngOnInit() {
    this.service.getKSignUps().subscribe((res: KitchenUser[]) => {
      this.kitchenUsers= res;
      console.log(this.kitchenUsers);
    });
<tr *ngFor="let kitchenuser of kitchenUsers ">
  <td>
    {{ kitchenuser.kitchenName }}
  </td>
</tr>

If you're still experiencing issues, please share any error messages you see in the VS code debug console and your browser console.

Stay safe and best of luck.

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 retrieving a server-set cookie in your Angular 2 application, and guidelines for including the same cookie in requests made by your Angular 2 application

Requirement: Our application should be able to support the same user opening our web application as a separate session. The issue is not about how to use cookies in Angular 2, but rather how the server can retrieve cookies from the HTTPServletRequest obje ...

What event type should be used for handling checkbox input events in Angular?

What is the appropriate type for the event parameter? I've tried using InputEvent and HTMLInputElement, but neither seems to be working. changed(event) { //<---- event?? console.log({ checked: event.target.checked }); } Here's the com ...

Showing Information without NgFor Directives

I have successfully displayed data without using a ngFor loop. However, it is currently showing all the quote information from multiple customers. The CSS is arranged in such a way that the discount div is positioned next to the customerinfo div. Below is ...

Encountering a WriteableDraft error in Redux when using Type Definitions in TypeScript

I'm facing a type Error that's confusing me This is the state type: export type Foo = { animals: { dogs?: Dogs[], cats?: Cats[], fishs?: Fishs[] }, animalQueue: (Dogs | Cats | Fishs)[] } Now, in a reducer I&a ...

Modifying the functionality of "use-input" in Vue.js

Currently, I am utilizing vue.js along with typescript to create an input field that allows users to either choose items from a drop-down menu or manually type in their own input. There are various scenarios where custom input might be allowed or where onl ...

What is the alternative parameter to use instead of onChange in React Router v4?

Having an issue with the onChange Prop in TypeScript and React JS: I am encountering an error message saying "No overload matched this call." <HashRouter> <Switch> <Route path="/" ...

Is there a workaround in TypeScript to add extra details to a route?

Typically, I include some settings in my route. For instance: .when('Products', { templateUrl: 'App/Products.html', settings: { showbuy: true, showex ...

typescript class with a union type

Currently, I am in the process of learning ionic and angular. Within this application, I have implemented the following classes: model.ts export class Feed { constructor( public type: string, public object: ReactionObject | ObituaryObject ) { ...

Angular's server-side routing is essential for custom localization functionality

I am currently working on localizing my Angular app. All the displayed values are stored in a single json file (stringResources.json). After translation, I will have individual files for each supported language (e.g. en.json, fr.json, etc). Since I utilize ...

How can I structure the response from HttpClient to make it compatible with *ngFor

I need assistance in solving a minor issue. I am working with data from a REST API, which is returned as an array of objects. After receiving this data in my service, I attempt to transform it and push it to a subject to notify my component about the arriv ...

Angular 2 Error: Trying to access 'annotations' property of undefined variable causing TypeError

Where could I be making a mistake? app.component.ts import {Component} from 'angular2/core'; @Component({ selector: 'my-app', template: `{{title}}` }) export class App { title = "Angular 2 beta"; constructor() { console.clea ...

Passing dynamically loaded parameters to a function during dropdown value selection in Angular 2

Could you please review if I am passing the parameters correctly in the li tag's click function of the updateId method? The console errors only point to that line. This is my app.component.html code: <div class='form-group' style="width ...

Do [(ngModel)] bindings strictly adhere to being strings?

Imagine a scenario where you have a radiobutton HTML element within an angular application, <div class="radio"> <label> <input type="radio" name="approvedeny" value="true" [(ngModel)]=_approvedOrDenied> Approve < ...

Angular 8 does not allow for the assignment of type '{}' to a parameter

I have a unique approach for managing errors: private handleErrors<T>(operation = 'operation', result?: T) { return (error: any): Observable<T> => { console.error(error); this.record(`${operation} failed: ${error.m ...

Cross-component communication in Angular

I'm currently developing a web-based application using angular version 6. Within my application, there is a component that contains another component as its child. In the parent component, there is a specific function that I would like to invoke when ...

Unable to utilize the web-assembly Rust implementation due to the error stating 'Cannot access '__wbindgen_throw' before initialization'

Looking to integrate some web-assembly into my project, I started off by testing if my webpack setup was functioning properly and able to utilize my .wasm modules. Here's a snippet of what I came up with: #[wasm_bindgen] pub fn return_char() -> cha ...

How can I dynamically change the prefix in an angular router?

In my Angular app, I have two main routes: dashboard and login: www.example.com/dashboard www.example.com/auth/login These routes are defined as follows: const routes = [ { path: 'dashboard', component: DashboardComponent }, { path: 'auth ...

Implement a personalized Laravel Dusk selector with the attribute data-dusk

In the world of Laravel Dusk, the default selector hunts for the dusk="something" attribute in your HTML. If you want to dive deeper into this topic, check out this resource. However, when it comes to compatibility with Typescript for React/Vue, ...

Angular 5 - Strategies for excluding specific properties from Observable updates

Currently, I am in the process of developing a webpage where users can view and like various videos. The video content and user likes are stored in a database, and I have implemented two Angular services for handling data retrieval and storage. However, I ...

Ways to pass a class list from a client to a webmethod using AJAX

I have a list of client-side classes in TypeScript that I need to send to a web method. Here is my TypeScript code: class MakeReportData { LocalName: string; FldSi: number; ViewSi:number; TypeName:string ; CheckBoxshow :boolean ; ...