I am fetching data from SQL server through a back-end API in asp.net, and everything is going well I am fetching the data as well but it's not showing on the screen only in the console here is a picture to understand what I am trying to achieve

Picture

Here is my .service:

GetCategories(): Observable<any> {
    return this.http.get<any>(this.BaseUrl);
    // return this.afs.collection<any>('Categories').valueChanges();
  }

and here is my .ts :

GetCategories() {
    this.api.GetCategories().subscribe({
      next: (Categ) => {
        this.categories = Categ;
        console.log(this.categories);
      },
      error: (err) => {
        console.log(err);
      },
    });
  }

and my .HTML :

<mat-form-field fxLayoutAlign="center center" (click)="GetCategories()">
      <mat-label> Filter by Categories</mat-label>
      <mat-select (selectionChange)="FilterCateg($event)">
        <mat-option
          *ngFor="let Categ of categories"
          [value]="Categ.categories"
          
        >
          {{ Categ.categories }}
        </mat-option>
      </mat-select>
    </mat-form-field>

From my experience it should be displaying but I don't know what I am doing wrong, thanks for help in advance.

CodePudding user response：

Instead of {{ Categ.categories }}, according to the data shown in your screenshot, you're dealing with a single category at this point. Thus it should be {{ Categ.categoryName }} instead.

And likewise, [value]="Categ.categories" should be [value]="Categ.categoryID".

CodePudding user response：

The error is in the html template, in there you use Categ.categories but probably categories no is a key in your Categ object.

You can see on your console.log(this.categories) the objects elements and decide which you want use to renderize in your template or binding in somewhere else.