当选择其中一个选项时,PrimeNG下拉菜单会抛出错误



我正在尝试用priming构建一个有角度的应用程序。问题出在我的创建组件中,我想使用下拉列表来选择一些选项。

这是我的.ts文件和相关代码:

//imports
interface Category {
label: string,
value: string
}
...
export class CreateComponent implements OnInit {

categories!: Category[];
selectedCategory!: Category;
createForm!: FormGroup;
// constructor
ngOnInit() {
this.categories = [
{ label: 'Scifi', value: 'Scifi' },
{ label: 'Comedy', value: 'Comedy' },
{ label: 'Horror', value: 'Horror' },
{ label: 'Action', value: 'Action' },
{ label: 'Thriller', value: 'Thriller' },
{ label: 'Romance', value: 'Romance' },
{ label: 'Adventure', value: 'Adventure' }
];
console.log("ngOninit called")
this.createForm = this.formBuilder.group({
id: [],
nameOfFilm: ['', Validators.required],
director: ['', Validators.required],
category: ['', Validators.required],
yearMade: ['', Validators.required],
mainActor: ['', Validators.required],
length: ['', Validators.required]
});
}

和我的html文件:

<p-card header="You can add new films to the list here" class="flex">
<div class="container">
<form [formGroup]="createForm" (ngSubmit)="addNewFilm()"> 
<div class="p-float-label">
<p-dropdown [options]="categories" [(ngModel)]="categories" placeholder="Select a category"
formControlName="category" optionLabel="label" [showClear]="true"></p-dropdown>
</div>

</form>
</div>
</p-card>

如果我使用输入字段而不是下拉列表,那么还有其他输入字段可以很好地工作。

显示的错误是:ERROR Error: NG0900: Error trying to diff '[object Object]'. Only arrays and iterables are allowed

当我从下拉字段中选择一个选项时,它就会显示出来,我不知道自己做错了什么。

在下拉列表中删除[(ngModel)]

最新更新