日历中的多项选择不起作用 - primeNG答案

【问题标题】：Multiple choice in calendar doesn't work - primeNG日历中的多项选择不起作用 - primeNG
【发布时间】：2018-03-21 15:27:46
【问题描述】：

我想在 primeNG 中使用日历 - 范围和多个选项，但它不起作用。我只能从日历中选择一个日期。

<div class="box-body">
    <div class="row">
        <div class="col-md-12">
            <p-calendar maxDateCount="2" placeholder="Choose days" [(ngModel)]="dates" selectionMode="multiple" readonlyInput="true"></p-calendar>
        </div>
        <div class="col-md-12">
            <p-calendar placeholder="Choose range of date" [(ngModel)]="rangeDates" selectionMode="range" readonlyInput="true" ></p-calendar>
       </div>
   </div>
</div>

组件.ts

import { MultiSelectModule, CalendarModule} from 'primeng/primeng';
import { Component } from '@angular/core';

export class CalendarDemo {

dates: Date[];
rangeDates: Date[];

}

【问题讨论】：

在应用之前检查要应用的标签你有错误
为什么要在组件中导入模块？
我在“module.ts”文件中导入。以上我记错了。
请更正您的标签
标签没有问题。看看我在解决方案下面的评论。

标签： angular typescript primeng

【解决方案1】：

我创建了一个working plunker 来证明它应该可以工作。它也在处理PrimeNG demo page，因此它可能与您的应用程序的外部实现细节有关。

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: 'app/app.template.html'
})

export class AppComponent {
    dates: Date[];
    rangeDates: Date[];
}

app.module.ts

import { NgModule }      from '@angular/core';
import { FormsModule }   from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent }   from './app.component';

// Import PrimeNG modules
import { CalendarModule } from 'primeng';

@NgModule({ 
  imports:      [ BrowserModule, BrowserAnimationsModule, FormsModule, CalendarModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }

app.template.html

<h3>Angular 4.2.6, PrimeNG 4.1.3, Calendar example</h3>

<!--<p-calendar [(ngModel)]="value" [inline]="true"></p-calendar>-->

<div class="box-body">
    <div class="row">
        <div class="col-md-12">
            <p-calendar maxDateCount="2" placeholder="Choose days" [(ngModel)]="dates" selectionMode="multiple" readonlyInput="true"></p-calendar>
        </div>
        <div class="col-md-12">
            <p-calendar placeholder="Choose range of date" [(ngModel)]="rangeDates" selectionMode="range" readonlyInput="true" ></p-calendar>
       </div>
   </div>
</div>

【讨论】：

问题已解决：我有 4.0.0 版本的 primeNG，必须是 - 4.1.3。