2

我是 Ionic 的新手，我正在尝试在 Ionic3 应用程序中使用Angular 日历。但它给我一个错误说明，

无法绑定到“视图”，因为它不是“div”的已知属性。这是屏幕截图：在此处输入图像描述

这是我的 app.module 文件

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpModule, Headers } from '@angular/http';
import { CommonModule } from '@angular/common';
import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
import { IonicStorageModule } from '@ionic/storage';
import { CalendarModule } from 'angular-calendar';
import { NgxPaginationModule } from 'ngx-pagination';
import {CalendarprimModule} from 'primeng/calendar';

import { MyApp } from './app.component';
import { WelcomePage } from '../pages/welcome/welcome';
import { MycardeditPage } from '../pages/mycardedit/mycardedit';
import { EditModalPage } from '../pages/edit-modal/edit-modal';
import { FormaddPage } from '../pages/formadd/formadd';
import { JobmodalPage } from '../pages/jobmodal/jobmodal';
import { DataService } from '../providers/data-service/data-service';

@NgModule({
  declarations: [
    MyApp,
    WelcomePage,
    EditModalPage,
    MycardeditPage,
    FormaddPage,
    JobmodalPage
  ],
  imports: [
    CalendarprimModule,
    BrowserModule,
    CommonModule,
    BrowserAnimationsModule,
    CalendarModule.forRoot(),
    NgbModalModule.forRoot(),
    FormsModule,
    HttpClientModule,
    ReactiveFormsModule,
    HttpModule,
    NgxPaginationModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot()
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    WelcomePage,
    MycardeditPage,
    EditModalPage,
    FormaddPage,
    JobmodalPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    HttpClientModule,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    DataService
  ]
})
export class AppModule {}

我的打字稿看起来像这样

import { Component, ViewChild, ChangeDetectionStrategy, TemplateRef, ViewEncapsulation } from '@angular/core';
import { IonicPage, NavController, NavParams, AlertController, ModalController } from 'ionic-angular';
import { WelcomePage } from '../welcome/welcome';
import { MycardeditPage } from '../mycardedit/mycardedit';
import { FormBuilder, FormGroup, FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { DataService } from '../../providers/data-service/data-service';
import { Storage } from '@ionic/storage';
import 'rxjs/add/operator/toPromise';
import * as moment from 'moment';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {
  startOfDay,
  endOfDay,
  subDays,
  addDays,
  endOfMonth,
  isSameDay,
  isSameMonth,
  addHours
} from 'date-fns';
import { Subject } from 'rxjs/Subject';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { CalendarModule } from 'angular-calendar';
import {
  CalendarEvent,
  CalendarEventAction,
  CalendarEventTimesChangedEvent
} from 'angular-calendar';

const colors: any = {
  red: {
    primary: '#ad2121',
    secondary: '#FAE3E3'
  },
  blue: {
    primary: '#1e90ff',
    secondary: '#D1E8FF'
  },
  yellow: {
    primary: '#e3bc08',
    secondary: '#FDF1BA'
  }
};

@IonicPage()
@Component({
  selector: 'page-calendarnew',
  templateUrl: 'calendarnew.html',
})
export class CalendarnewPage {
  
  public date = moment();
  public dateForm: FormGroup;
  public isReserved = null;
  public isReservedDay = null;
  public daysArr;
  @ViewChild('recId') recId;
  @ViewChild('frdId') frdId;
  @ViewChild('month') month;
  @ViewChild('days') days;
  @ViewChild('currDate') currDate;
  @ViewChild('modalContent') modalContent: TemplateRef<any>;

  view: string = 'month';

  viewDate: Date = new Date();

  modalData: {
    action: string;
    event: CalendarEvent;
  };

  actions: CalendarEventAction[] = [
    {
      label: '<i class="fa fa-fw fa-pencil"></i>',
      onClick: ({ event }: { event: CalendarEvent }): void => {
        this.handleEvent('Edited', event);
      }
    },
    {
      label: '<i class="fa fa-fw fa-times"></i>',
      onClick: ({ event }: { event: CalendarEvent }): void => {
        this.events = this.events.filter(iEvent => iEvent !== event);
        this.handleEvent('Deleted', event);
      }
    }
  ];

  refresh: Subject<any> = new Subject();

  events: CalendarEvent[] = [
    {
      start: subDays(startOfDay(new Date()), 1),
      end: addDays(new Date(), 1),
      title: 'A 3 day event',
      color: colors.red,
      actions: this.actions
    },
    {
      start: startOfDay(new Date()),
      title: 'An event with no end date',
      color: colors.yellow,
      actions: this.actions
    },
    {
      start: subDays(endOfMonth(new Date()), 3),
      end: addDays(endOfMonth(new Date()), 3),
      title: 'A long event that spans 2 months',
      color: colors.blue
    },
    {
      start: addHours(startOfDay(new Date()), 2),
      end: new Date(),
      title: 'A draggable and resizable event',
      color: colors.yellow,
      actions: this.actions,
      resizable: {
        beforeStart: true,
        afterEnd: true
      },
      draggable: true
    }
  ];

  activeDayIsOpen: boolean = true;
  
  ngOnInit() {

  }
  constructor(public navCtrl: NavController, public navParams: NavParams, private modal: NgbModal, private dataService:DataService) {
  }

  dayClicked({ date, events }: { date: Date; events: CalendarEvent[] }): void {
    if (isSameMonth(date, this.viewDate)) {
      if (
        (isSameDay(this.viewDate, date) && this.activeDayIsOpen === true) ||
        events.length === 0
      ) {
        this.activeDayIsOpen = false;
      } else {
        this.activeDayIsOpen = true;
        this.viewDate = date;
      }
    }
  }

  eventTimesChanged({
    event,
    newStart,
    newEnd
  }: CalendarEventTimesChangedEvent): void {
    event.start = newStart;
    event.end = newEnd;
    this.handleEvent('Dropped or resized', event);
    this.refresh.next();
  }

  handleEvent(action: string, event: CalendarEvent): void {
    document.getElementById('mCont').style.display = 'flex';
    this.modalData = { event, action };
    this.modal.open(this.modalContent, { size: 'lg' });
  }

  close() {
    document.getElementById('mCont').style.display = 'none';
  }

  addEvent(): void {
    this.events.push({
      title: 'New event',
      start: startOfDay(new Date()),
      end: endOfDay(new Date()),
      color: colors.red,
      draggable: true,
      resizable: {
        beforeStart: true,
        afterEnd: true
      }
    });
    this.refresh.next();
  }
}

最后我的组件看起来像这样：

<ion-card-content class="myclass">
      <div class="row text-center topRow" style="margin-top: 3%; margin-bottom: 1%;">
  <div class="col-md-4">
    <div class="btn-group">
      <div
        class="btn btn-primary"
        mwlCalendarPreviousView
        [view]="view"
        [(viewDate)]="viewDate"
        (viewDateChange)="activeDayIsOpen = false">
        Previous
      </div>
      <div
        class="btn btn-outline-secondary"
        mwlCalendarToday
        [(viewDate)]="viewDate">
        Today
      </div>
      <div
        class="btn btn-primary"
        mwlCalendarNextView
        [view]="view"
        [(viewDate)]="viewDate"
        (viewDateChange)="activeDayIsOpen = false">
        Next
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <h3>{{ viewDate | calendarDate:(view + 'ViewTitle'):'en' }}</h3>
  </div>
  <div class="col-md-4">
    <div class="btn-group">
      <div
        class="btn btn-primary"
        (click)="view = 'month'"
        [class.active]="view === 'month'">
        Month
      </div>
      <div
        class="btn btn-primary"
        (click)="view = 'week'"
        [class.active]="view === 'week'">
        Week
      </div>
      <div
        class="btn btn-primary"
        (click)="view = 'day'"
        [class.active]="view === 'day'">
        Day
      </div>
    </div>
  </div>
</div>
<br>
<div [ngSwitch]="view" style="width: 90%; margin-left: 5%; margin-bottom: 13%;">
  <mwl-calendar-month-view class="myCal"
    *ngSwitchCase="'month'"
    [viewDate]="viewDate"
    [events]="events"
    [refresh]="refresh"
    [activeDayIsOpen]="activeDayIsOpen"
    (dayClicked)="dayClicked($event.day)"
    (eventClicked)="handleEvent('Clicked', $event.event)"
    (eventTimesChanged)="eventTimesChanged($event)">
  </mwl-calendar-month-view>
  <mwl-calendar-week-view
    *ngSwitchCase="'week'"
    [viewDate]="viewDate"
    [events]="events"
    [refresh]="refresh"
    (eventClicked)="handleEvent('Clicked', $event.event)"
    (eventTimesChanged)="eventTimesChanged($event)">
  </mwl-calendar-week-view>
  <mwl-calendar-day-view
    *ngSwitchCase="'day'"
    [viewDate]="viewDate"
    [events]="events"
    [refresh]="refresh"
    (eventClicked)="handleEvent('Clicked', $event.event)"
    (eventTimesChanged)="eventTimesChanged($event)">
  </mwl-calendar-day-view>
  <div #modalContent id="mCont" style="display: none; flex-direction: column; justify-content: center; margin-top: 20px; border: 1px solid rgb(221, 221, 221); padding: 12px; color: #fff; background: #197CD3;">
     <div class="modal-header" style="display: flex;">
      <h5 class="modal-title" style="display: flex; flex: 1;">Event action occurred</h5>
      <button type="button" class="close" style="font-weight: 700;font-size: 25px;" (click)="close()">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <div>
        Event:
        <pre style="margin-top: 10px; padding: 6px 10px; border-radius: 1px; background: #fff;">Title: {{ modalData?.event.title }}</pre>
        <pre style="padding: 6px 10px; border-radius: 1px; background: #fff;">Start: {{ modalData?.event.start }}</pre>
        <pre style="padding: 6px 10px; border-radius: 1px; background: #fff;">End: {{ modalData?.event.end }}</pre>
      </div>
    </div>
      <div class="modal-footer" style="padding: 10px; padding-bottom: 0px;">
        <button type="button" class="btn btn-default" style="padding: 5px 10px; font-size: 12px; border: 1px solid #ccc; border-radius: 1px;" (click)="close()" data-dismiss="modal">Close</button>
      </div>
</div>
</div>
  
    </ion-card-content>

现在，当我渲染组件时，它给了我错误：

Can't bind to 'view' since it isn't a known property of 'div'. ("
        class="btn btn-primary"
        mwlCalendarPreviousView
        [ERROR ->][view]="view"
        [(viewDate)]="viewDate"
        (viewDateChange)="activeDayIsOpen = false">
"): ng:///CalendarnewPageModule/CalendarnewPage.html@24:8

有没有我可能错过的东西。请帮忙。

4

2 回答 2

0

看起来您正在尝试使用属性绑定。在属性绑定中，您只能绑定该元素上存在的属性。由于视图不是 div 的属性，即<div class="my-class" view="my-view"></div>（div 标签上的视图不是有效的 html），它会抛出这个错误。

文档建议使用<button>.

于 2018-05-01T18:15:04.157 回答
0

你需要添加

/* angular-cli file: src/styles.css */
@import "../node_modules/angular-calendar/css/angular-calendar.css";

这不是自动完成的，angular.json 中的样式条目可能会以某种方式被覆盖，

于 2021-02-15T15:07:46.223 回答