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"位假定组件中存在selectedOccupation变量。使用[(ngModel)]在html中<select>元素的值（此时将选择任何选项）和selectedOccupation变量的值之间创建一个two way binding在组件中。换句话说，如果用户从html的选择菜单中选择“ foo”，则组件中selectedOccupation变量的值将更改为“ foo”（组件内部的更改将反映在html）。我不会遍历其余部分，因为这与问题无关，但是其余代码的基本要点是，它将在select语句中将每个occupations作为选项列出。

工作代码

要使代码正常工作，您只需要将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"。

Answer 2

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

[(ngModel)]和[value]应采用相同的格式。

Answer 3

不是在ngModel中给整个数组“占用”：

console.log(456789 * 456789);

给出任何单个变量。

尝试diff''时出错。只允许数组和迭代

3 个答案:

基本说明

详细说明

工作代码