开发者问题收集

尝试比较“”时出错。仅允许数组和可迭代对象

2017-10-13
57770

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

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

如果有人可以告诉我如何修复此问题,我将不胜感激。

3个回答

基本解释

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

更长的解释

考虑以下示例,让我们分解一下以了解这是什么意思:

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

在此示例中, [(ngModel)]="selectedOccupation" 位假定组件中存在 selectedOccupation 变量。使用 [(ngModel)] 可在 html 中的 <select> 元素的值(即当时选择的任何选项)与组件中的 selectedOccupation 变量的值之间创建 双向绑定 。换句话说,如果用户从 html 中的选择菜单中选择“foo”,则组件中的 selectedOccupation 变量的值将更改为“foo”(组件内部的更改将反映在 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"

Floyd
2018-10-01
[(ngModel)]="occupations[0]"

[(ngModel)][value] 应该具有相同的格式。

Seven
2017-12-19

不要在 ngModel 中提供整个数组“occupations”:

[(ngModel)]="occupations" 

提供任意单个变量。

Abhishek Gupta
2018-06-26