web-dev-qa-db-ja.com

PrimeNG Growlは、「p-growl」の既知のプロパティではないため、「value」にバインドできません

PrimeNGは初めてですが、PrimeNGで美しいものを作成できることを発見しました。 PrimeNgからうなり声を上げようとしていますが、「「p-growl」の既知のプロパティではないため、「value」にバインドできません」というエラーが表示され続けます。 PrimeNGの「メッセージ」を使用しましたが、これは正常に機能します。もう一方は機能するため、何が間違っているのかわかりません。

私のコンポーネントts

import {Component, OnInit} from '@angular/core';
import {IMailModel} from '../models/mail.model';
import {MailService} from '../Services/mail.service';
import {Message} from 'primeng/primeng';


@Component({
    selector: 'coordinator-invitations',
    moduleId: module.id,
    templateUrl: 'coordinatorInvitations.component.html',
    styleUrls: ['../../assets/css/in/content.css'],
})

export class CoordinatorInvitationsComponent implements OnInit {
    listReceivers: IMailModel[];
    listSenders: IMailModel[];
    pageTitle: string = 'Uitnodigingen versturen';
    errorMessage: string;
    msgs: Message[] = [];
    msgsGrowl: Message[] = [];
    subject: string = "";
    text: string="";
    success: boolean;


    constructor(private _mailService: MailService) {

    }

    ngOnInit(): void {
        this._mailService.getMailAddresses()
            .subscribe(listSenders => this.listSenders = listSenders,
                error => this.errorMessage = <any>error);
        this.listReceivers = [];
    }

    onclick(): void {
      this.msgs=[];
      this.success=true;
      if(this.listReceivers.length===0) {
        this.msgs.Push({severity:'error', summary:'Error', detail:'Er zijn geen ontvangers geselecteerd.'});
        this.success=false;
      }
      if(this.subject.length===0)
      {
        this.msgs.Push({severity:'error', summary:'Error', detail:'Er is geen onderwerp opgegeven.'});
        this.success=false;
      }
      if(this.text.length===0)
      {
        this.msgs.Push({severity:'error', summary:'Error', detail:'Er is geen inhoud ingegeven.'});
        this.success=false;
      }

      if(this.success===true)
      {
        this.msgsGrowl.Push({severity:'success', summary:'Succes', detail:'De uitnodigingen zijn succesvol verstuurd.'});
      }
    }
}

私のコンポーネントHTML

<div id="title">
    <span>{{pageTitle}}</span>
</div>
<div id="content">
  <p-growl [value]="msgsGrowl" sticky="sticky"></p-growl>
  <p-messages [value]="msgs"></p-messages>
  <p-pickList [source]="listSenders" [target]="listReceivers" sourceHeader="Kies ontvangers" targetHeader="Ontvangers" [responsive]="true" [sourceStyle]="{'height':'300px'}" [targetStyle]="{'height':'300px'}" [showSourceControls]="false" [showTargetControls]="false">
      <ng-template let-user pTemplate="item">
        <div class="ui-helper-clearfix">
          <div style="font-size:14px;">{{user.Name}}</div>
        </div>
      </ng-template>
    </p-pickList>
   <h1>Mail</h1>
<p><u>Onderwerp:</u> <input type="text" class="form-control" [(ngModel)]="subject"/></p>
<p-editor [(ngModel)]="text" [style]="{'height':'320px'}"></p-editor>
<p style="margin-top: 10px;"><button pButton type="button" label="Versturen" icon="fa-check" iconPos="left" (click)="onclick()"></button>
</p>

私のモジュール

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {CoordinatorPaneelComponent} from './coordinatorPaneel.component';
import {routing} from '../app.routing';
import {CoordinatorPaneelMenuComponent} from './DesignParts/coordinatorPaneelMenu.component';
import {CoordinatorTopMenu} from './DesignParts/coordinatorTopMenu.component';
import {CoordinatorDashboard} from './Dashboard/coordinatorDashboard.component';
import {CoordinatorInternshipAssignmentsViewComponent} from './InternshipAssignments/coordinatorInternshipAssignmentsView.component';
import {CoordinatorInternshipAssignmentsComponent} from './InternshipAssignments/coordinatorInternshipAssignments.component';
import {InternshipAssignmentService} from './Services/InternshipAssignment.service';
import {CommonModule} from '@angular/common';
import {CoordinatorInternshipProposalComponent} from './InternshipProposal/coordinatorInternshipProposal.component';
import {CoordinatorInternshipProposalDetailComponent} from './InternshipProposal/coordinatorInternshipProposalDetail.component';
import {CoordinatorInternshipProposalDetailViewComponent} from './InternshipProposal/coordinatorInternshipProposalDetailView.component';
import {CoordinatorInternshipProposalViewComponent} from './InternshipProposal/coordinatorInternshipProposalView.component';
import {PopupModel} from './DesignParts/popup.model';

import {CoordinatorInvitationsComponent} from './Invitations/coordinatorInvitations.component';
import {CoordinatorInvitationsViewComponent} from './Invitations/coordinatorInvitationsView.component';

import {PopupComponent} from './DesignParts/popup.component';
import {InternshipSpecialisationFilterPipe} from './Services/internshipSpecialisation-filter.component';
import {InternshipStatusFilterPipe} from './Services/internshipStatus-filter.component';
import {CoordinatorInternshipAssignmentDetailViewComponent} from './InternshipAssignments/coordinatorAssignmentDetailView.component';
import {CoordinatorInternshipAssignmentDetailComponent} from './InternshipAssignments/coordinatorAssignmentDetail.component';
import {MailService} from './Services/mail.service';
import {FormsModule} from '@angular/forms';
import {PickListModule} from 'primeng/primeng';
import {EditorModule, SharedModule, ButtonModule, MessagesModule, GrowlModule} from 'primeng/primeng';


@NgModule({
  imports: [routing, CommonModule, BrowserModule, FormsModule,
    PickListModule,
    SharedModule,
    ButtonModule,
    EditorModule,
    MessagesModule,
    GrowlModule
  ],
  declarations: [
    CoordinatorPaneelComponent,
    CoordinatorPaneelMenuComponent,
    CoordinatorTopMenu,
    CoordinatorDashboard,
    CoordinatorInternshipAssignmentsViewComponent,
    CoordinatorInternshipAssignmentsComponent,
    CoordinatorInternshipAssignmentDetailViewComponent,
    CoordinatorInternshipAssignmentDetailComponent,
    CoordinatorInternshipProposalComponent,
    CoordinatorInternshipProposalDetailViewComponent,
    CoordinatorInternshipProposalViewComponent,
    CoordinatorInternshipProposalDetailComponent,
    InternshipSpecialisationFilterPipe,
    InternshipStatusFilterPipe,
    CoordinatorInternshipProposalDetailComponent,
    CoordinatorInternshipProposalDetailViewComponent,
    PopupComponent,
    PopupModel,
    CoordinatorInvitationsComponent,
    CoordinatorInvitationsViewComponent,

  ],
  providers: [
    InternshipAssignmentService,
    MailService
  ]
})
export class CoordinatorModule {
}

TL; DR：PrimeNGメッセージモジュールは機能しますが、PrimeNGGrowlモジュールは機能しません

angularprimeng
8
stef morren

app.module.tsのprimengからGrowlModuleをインポートします。

import { GrowlModule } from 'primeng/primeng';

次に、GrowlModuleをapp.module.tsのインポートセクションに追加します。

imports [GrowlModule]

注：-primeng/primengをインポートするときに、プロジェクトにprimengの​​すべてのAPIが含まれるため、プロジェクトのサイズが大きくなる可能性があります。

4
Prabhat Maurya

コンポーネントにGrowlModuleをインポートする必要があります

import {GrowlModule,Message} from 'primeng/primeng';
2
Toolkit