CODEWITHSUNDEEP
angular
user11352561
user11352561

Reputation: 2647

Angular - error TS2322: Type '{ id: number; name: string; }' is not assignable to type 'NgIterable<any> | null | undefined'

In my Angular-12, I have my api JSON endpoint as:

{
  "message": "Categories Successfully Retrieved.",
  "error": false,
  "code": 200,
  "results": {
    "categories": [{
      "id": 2,
      "name": "Computer",
      "parent_id": null,
      "child": [{
          "id": 3,
          "name": "Central Processing Unit",
          "parent_id": 2,
        },
        {
          "id": 4,
          "name": "Hard Disc",
          "parent_id": 2,
        }
      ]
    }]
  }
}

Service:

public getCategories(): Observable<any> {
  return this.http.get(this.api.baseURL + 'categories/list', this.httpOptions);
}

Then I have this interface:

export interface ICategory {
  id?: number;
  name: string;
  parent_id?: number;
  child?: {id:number,name:string};
}

Component:

data = [];
allCategoryList: any[] = [];
category!: ICategory;
isLoading = false;
isSubmitted = false;

constructor(
  private fb: FormBuilder,
  private categoryService: CategoryService,
  private router: Router,
  private store: Store < AppState > ,
) {}

ngOnInit(): void {
  this.isLoading = true;
  this.loadCategory();
  this.loadDatatable();
}

loadCategory() {
  this.categoryService.getCategories().subscribe(
    data => {
      this.allCategoryList = data.results.categories;
    },
    error => {
      this.store.dispatch(loadErrorMessagesSuccess(error));
      this.isLoading = false;
    }
  );
}

viewCategoryModal(row: any) {
  this.category = row;
}

HTML:

I am trying to use the list below to display the detail of each row:

<a class="btn btn-info btn-sm" (click)="editCategoryModal(row)" data-toggle="modal" data-target="#editCategoryModal">
                Edit
</a>


<div class="modal fade" id="viewCategoryModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"> Category Details</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
      </div>

      <div class="modal-body" *ngIf="category != undefined">
        <div class="col-md-12">
          <div class="row">
            <div class="col-md-6">
              Category: <strong>{{ Category.name || 'N/A' }}</strong>
            </div>
          </div>
        </div>
        <div class="col-md-12">
          <div class="row">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th style="width: 100%">Contract</th>
                </tr>
              </thead>
              <tbody *ngIf="category.child != undefined">
                <tr *ngFor="let subcategory of category.child">
                  <td>{{subcategory.name}}</td>
                </tr>
                <tr *ngIf="!category.child">
                  <td colspan="4" class="text-center">
                    <span class="spinner-border spinner-border-lg align-center"></span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal" (click)="hide()">Close</button>
      </div>
    </div>
  </div>
</div>

Parent Category will have many child subcategory. So when user clicks the parent category detail row, it suppose to display the modal for the detail parent category and all it's child categories, but I got this error:

error TS2322: Type '{ id: number; name: string; }' is not assignable to type 'NgIterable | null | undefined'.

and it highlights of in:

How do I get this resolved?

Thanks

Upvotes: 2

Views: 2797

Answers (1)

H3AR7B3A7
H3AR7B3A7

Reputation: 5261

Does this help to solve your problem?

IPlace.ts:

export interface IPlace {
  id:number,
  name:string
}

ICategory.ts:

import { Place } from './Place'

export interface ICategory {
  id?: number;
  name: string;
  parent_id?: number;
  child?: IPlace[];
}

Upvotes: 0

Related Questions