无法绑定到“value”，因为它不是“p-galleria”的已知属性

Question

我一定是做了一些愚蠢的事情，因为我在其他地方找不到这个问题。 我正在尝试使用 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

发生什么事了？

Answer 1

这必须是你与价值结合的方式。查看 docs，我认为该组件不支持“banana-in-a-box”绑定 - 所以尝试将其更改为：

<p-galleria [value]="images">

Answer 2

我发现已经晚了，但是

您需要将 [(value)] 更改为 [value]，因为它甚至不需要是双向绑定变量。