angular - 无法绑定到“值”,因为它不是“p-galleria”的已知属性
问题描述
我一定是在做一些愚蠢的事情,因为我在其他任何地方都找不到这个问题。我正在尝试使用 PrimeNG 的 Galleria,但我无法超越基础知识。我正在使用许多其他 PrimeNG 组件,没有问题。
我有一个 Angular 项目。
在我的 app.module.ts 我有:
import { BrowserModule } from '@angular/platform-browser';
import {ApplicationRef, DoBootstrap, NgModule} from '@angular/core';
import {HttpClient, HttpClientModule} from '@angular/common/http';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {AutoCompleteModule} from 'primeng/autocomplete';
import {AccordionModule} from 'primeng/accordion';
import {ButtonModule} from 'primeng/button';
import {FileUploadModule} from 'primeng/fileupload';
import { GalleriaModule } from 'primeng/galleria';
import {NgbDropdownModule} from '@ng-bootstrap/ng-bootstrap';
import { AppComponent } from './app.component';
import {HeaderComponent} from './header/header.component';
import { RecipeListComponent } from './recipes/recipe-list/recipe-list.component';
import { RecipeDetailComponent } from './recipes/recipe-detail/recipe-detail.component';
import { RecipeItemComponent } from './recipes/recipe-list/recipe-item/recipe-item.component';
import { ShoppingListComponent } from './shopping-list/shopping-list.component';
import { ShoppingEditComponent } from './shopping-list/shopping-edit/shopping-edit.component';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {DropdownDirective} from './model/dropdown.directive';
import { LoginButtonComponent } from './login-button/login-button.component';
import {RecipeService} from './services/recipe.service';
import {ShoppingListService} from './shopping-list/shopping-list.service';
import {AppRoutingModule} from './app-routing.module';
import { RecipeStartComponent } from './recipes/recipe-start/recipe-start.component';
import { RecipeEditComponent } from './recipes/recipe-edit/recipe-edit.component';
import {DataStorageService} from './services/data-storage.service';
import {RecipeEditMainComponent} from './recipes/recipe-edit/recipe-edit-main/recipe-edit-main.component';
import { RecipeEditIngredientsComponent } from './recipes/recipe-edit/recipe-edit-ingredients/recipe-edit-ingredients.component';
import { RecipeEditMethodsComponent } from './recipes/recipe-edit/recipe-edit-methods/recipe-edit-methods.component';
import { SandboxComponent } from './sandbox/sandbox.component';
import { RecipeEditImagesComponent } from './recipes/recipe-edit/recipe-edit-images/recipe-edit-images.component';
import { SignUpComponent } from './accounts/sign-up/sign-up.component';
import { ForgotPasswordComponent } from './accounts/forgot-password/forgot-password.component';
import { SignInComponent } from './accounts/sign-in/sign-in.component';
import { LoadingSpinnerComponent } from './loading-spinner/loading-spinner.component';
import { ErrorComponent } from './error/error.component';
import { AddUnitComponent } from './modal/add-unit/add-unit.component';
import { ConfirmDeleteComponent } from './modal/confirm-delete/confirm-delete.component';
import { CommentComponent } from './modal/comment/comment.component';
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
RecipeListComponent,
RecipeDetailComponent,
RecipeItemComponent,
ShoppingListComponent,
ShoppingEditComponent,
DropdownDirective,
LoginButtonComponent,
RecipeStartComponent,
RecipeEditComponent,
RecipeEditMainComponent,
RecipeEditIngredientsComponent,
RecipeEditMethodsComponent,
SandboxComponent,
RecipeEditImagesComponent,
SignUpComponent,
ForgotPasswordComponent,
SignInComponent,
LoadingSpinnerComponent,
ErrorComponent,
AddUnitComponent,
ConfirmDeleteComponent,
CommentComponent
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
NgbDropdownModule,
AppRoutingModule,
HttpClientModule,
BrowserAnimationsModule,
AutoCompleteModule,
AccordionModule,
ButtonModule,
FileUploadModule,
GalleriaModule
],
providers: [RecipeService,
ShoppingListService,
HttpClient,
DataStorageService],
bootstrap: [AppComponent]
})
export class AppModule {}
我有一个 sandbox.component.ts,看起来像这样:
import {AfterViewInit, Component, OnInit} from '@angular/core';
@Component({
selector: 'app-sandbox',
templateUrl: './sandbox.component.html',
styleUrls: ['./sandbox.component.css']
})
export class SandboxComponent implements OnInit {
images: [
{
previewImageSrc: 'images/603RawSteak.jpg',
thumbnailImageSrc: 'images/603RawSteak.jpg',
alt: 'Description for Image 1',
title: 'Title 1'
},
{
previewImageSrc: 'images/75CookedSteak.jpg',
thumbnailImageSrc: 'images/75CookedSteak.jpg',
alt: 'Description for Image 2',
title: 'Title 2'
}
];
responsiveOptions: any[] = [
{
breakpoint: '1024px',
numVisible: 5
},
{
breakpoint: '768px',
numVisible: 3
},
{
breakpoint: '560px',
numVisible: 1
}
];
constructor() {}
ngOnInit(): void {
}
}
我有一个 sandbox.component.html 文件,如下所示:
<p-galleria [(value)]="images">
<ng-template pTemplate="item" let-item>
<img [src]="item.previewImageSrc" style="width: 100%;" />
</ng-template>
<ng-template pTemplate="thumbnail" let-item>
<div class="p-grid p-nogutter p-justify-center">
<img [src]="item.thumbnailImageSrc" />
</div>
</ng-template>
</p-galleria>
我试图让它尽可能简单。但我收到以下错误:
ERROR in src/app/sandbox/sandbox.component.html:1:13 - error NG8002: Can't bind to 'value' since it isn't a known property of 'p-galleria'.
1. If 'p-galleria' is an Angular component and it has 'value' input, then verify that it is part of this module.
2. If 'p-galleria' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.
其他信息...
C:...>npm view primeng version
9.1.3
这是怎么回事?
解决方案
它必须是你绑定价值的方式。查看文档,我认为该组件不支持香蕉盒装绑定-因此请尝试将其更改为:
<p-galleria [value]="images">
推荐阅读
- python-3.x - 如何从 gpg 密钥中获取到期日期?
- javascript - 从 chrome 扩展程序访问网站数据的许可是什么
- javascript - 如何从 dom 选择器中添加值?
- python - to_csv pandas python不在excel中显示tabluar格式
- javascript - 无法注册,一直说不好的请求
- laravel - 如何为-excel文档上传检查编写功能测试
- node.js - JEST - 节点服务器在启动过程中遇到问题
- r - 使用 flextable 在表格的不同部分之间共享脚注
- django - Django - (限制来自被阻止用户的内容)无法解压缩不可迭代的 ManyRelatedManager 对象
- discord.js - 自动慢模式 Discord.js