尝试区分“”时出错。只允许使用数组和可迭代对象答案

【问题标题】：Error trying to diff ''. Only arrays and iterables are allowed尝试区分“”时出错。只允许使用数组和可迭代对象
【发布时间】：2017-10-13 15:59:12
【问题描述】：

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

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

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

【问题讨论】：

标签： angular

【解决方案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 )。我不会介绍其余部分，因为这与问题无关，但其余代码的基本要点是它将每个 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"。

【讨论】：

只记得在TS文件中添加selectedOccupation。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

而不是在 ngModel 中给出整个数组“职业”：

[(ngModel)]="occupations"

给出任何单个变量。

【讨论】：

这应该是一条评论 - 它太短且不够详细，无法作为答案。