Error trying to diff ''. Only arrays and iterables are allowed

Question

I keep getting the following console error:

Error trying to diff 'Paul'. Only arrays and iterables are allowed

HTML:

<fieldset class="one-quarter sm-padding">
    <label>Occupation</label>
    <select name="occupations"
            [(ngModel)]="occupations" 
            (ngModelChange)="showValuePromptText('Occupation', $event)">
        <option *ngFor="let occupation of occupations" 
                [value]="occupation">
            {{occupation}}
        </option>
    </select>
</fieldset>

TS:

import { Component } from '@angular/core';
import { PromptService } from '../../services/prompt.service';
import { IPromptText } from "../../models/IPromptText";

@Component({
    selector: 'fact-find',
    templateUrl: './factfind.component.html',
    styleUrls: ['./factfind.component.css'],
    providers: [PromptService]
})

export class FactFindComponent {
    promptTexts: IPromptText[];
    currentPromptText : string;

    showDefaultPromptText(fieldName: string) {
        if (fieldName != null) {
            this.promptService.fetchPrompts(fieldName, '').subscribe(
                (data) => this.currentPromptText = data
            );
        }
    }

    showValuePromptText(fieldName: string, fieldValue: string) {
        if (fieldValue != null) {
            this.promptService.fetchPrompts(fieldName, fieldValue).subscribe(
                (data) => this.currentPromptText = data
            );
        }
    }

    occupations: string[] = ["John", "Paul", "George", "Ringo"];
}

If anyone could shed some light on how I can fix this it would be greatly appreciated.

Answer 1

Basic Explanation

As others have noted, the issue is in the [(ngModel)]="occupations" line. It looks to me like it should be something like [(ngModel)]="selectedOccupation". In other words, you need to bind the [(ngModel)] to a string variable in the component.

Longer Explanation

Consider the following example and let's break it down to understand this is saying:

<select [(ngModel)]="selectedOccupation"
        (ngModelChange)="test()">
    <option *ngFor="let occupation of occupations" 
            [value]="occupation">
        {{occupation}}
    </option>
</select>

In this example, the [(ngModel)]="selectedOccupation" bit assumes that there is selectedOccupation variable in the component. Using [(ngModel)] creates a two way binding between the value of the <select> element in the html (which will be whatever option is selected at the time) and the value of the selectedOccupation variable in the component. In other words, if the user selects "foo" from the select menu in the html, the value of the selectedOccupation variable in the component will be changed to "foo" (and changes from within the component will be reflected in the html). I'm not going to walk through the rest of it as that isn't pertinent to the question, but the basic gist of the remaining code is that it will list each of the occupations as options in the select statement.

Working Code

To get your code working, you would just need to change the html to:

<fieldset class="one-quarter sm-padding">
<label>Occupation</label>
<select name="occupations"
        [(ngModel)]="selectedOccupation"
        (ngModelChange)="showValuePromptText('Occupation', $event)">
    <option *ngFor="let occupation of occupations" 
            [value]="occupation">
        {{occupation}}
    </option>
</select>

where selectedOccupation is a string variable that exists in the component.

I just changed [(ngModel)]="occupations" to [(ngModel)]="selectedOccupation".

Answer 2

[(ngModel)]="occupations[0]"

[(ngModel)] and [value] should have the same format.