尝试比较“”时出错。仅允许数组和可迭代对象
我不断收到以下控制台错误:
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"];
}
如果有人可以告诉我如何修复此问题,我将不胜感激。
基本解释
正如其他人所指出的,问题出在
[(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"
。
[(ngModel)]="occupations[0]"
[(ngModel)]
和
[value]
应该具有相同的格式。
不要在 ngModel 中提供整个数组“occupations”:
[(ngModel)]="occupations"
提供任意单个变量。