0

I am getting the below error while running the application:

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'subLandscape'. NgFor only supports binding to Iterables such as Arrays.

The subLandscape variable I am referring to in the HTML is an array but it throws an error while using it with "ngFor"

HTML:

 <div class="form-group" [class.has-error]="subLandscape.invalid && subLandscape.touched">
          <strong>Sub Landscape</strong>
          <br>
          <p>Please choose from one of the Sub Landscape options. Sub Landscape options are for reporting only.</p>
          <label class="control-label">SubLandscape:</label>
          <mat-select #subLandscape="ngModel" type="text" class="form-control"  name="subLandscape" [ngModel]="model.subLandscape">
              <mat-option *ngFor="let item of subLandscape">
                  {{ item }}
              </mat-option>
          </mat-select>
          <div *ngIf="subLandscape.invalid && subLandscape.touched" class="alert alert-danger">
            Select the Sub Landscape from the provided list.
          </div>
 </div>

Model:

export class SModel {
  constructor (
    public description: string,
    public reasons: string,
    public projectName: string,
    public subLandscape: string,
    public centerdata: string,
    public nom: number,
    public size: string,
    public dbgh: string
  ) {

  }
}

Component:

import { Component, OnInit } from '@angular/core';
import { Standalone } from '../standalone';
import { StandaloneModel } from '../models/standalone.model';
import {MatTableModule, MatTableDataSource} from '@angular/material/table';

@Component({
  selector: 'app-standalone-form',
  templateUrl: './standalone-form.component.html',
  styleUrls: ['./standalone-form.component.css']
})
export class StandaloneFormComponent {
  public project: string[] = ['', 'appdev', 'apptest', 'appqa'];
public subLandscape: string[] = ['DEV', 'Testing', 'QA', 'UAT'];
  public dataCenter: string[] = ['PDC', 'SDC'];
public model = new SModel('', '', '', '', '', 0, '', '');

}

1 Answer 1

3

Probably because it is unable to differentiate between subLandscape from #subLandscape="ngModel" and the component property array public subLandscape: string[] = ['DEV', 'Testing', 'QA', 'UAT'];. Change the name of either should solve the problem

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.