angular - 尝试比较 '' 时出错。仅允许数组和可迭代对象

Question

我不断收到以下控制台错误:

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"];
}

如果有人能告诉我如何解决这个问题，我将不胜感激。

Answer 1

基本说明

正如其他人所指出的，问题出在 [(ngModel)]="occupations" 中线。在我看来应该是类似 [(ngModel)]="selectedOccupation" 。换句话说，您需要bind [(ngModel)]到组件中的字符串变量。

更长的解释

考虑以下示例，让我们将其分解以理解这句话:

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

在此示例中，[(ngModel)]="selectedOccupation" bit 假设有 selectedOccupation组件中的变量。使用[(ngModel)]创建 two way binding <select> 的值之间html 中的元素(这将是当时选择的任何选项)和 selectedOccupation 的值组件中的变量。换句话说，如果用户从 html 的选择菜单中选择“foo”，则selectedOccupation的值组件中的变量将更改为“foo”(组件内的更改将反射(reflect)在 html 中)。我不会详细介绍其余部分，因为这与问题无关，但其余代码的基本要点是它将列出每个 occupations作为 select 语句中的选项。

工作代码

要使代码正常工作，您只需将 html 更改为:

<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>

哪里selectedOccupation是组件中存在的字符串变量。

我刚刚改变了[(ngModel)]="occupations"至[(ngModel)]="selectedOccupation" .