Angular 6 日歷模板解析錯誤：無法綁定到“視圖”，因為它不是“div”的已知屬性

Question

我在這里嘗試構建一個使用此角度日歷的應用程序： https ://mattlewis92.github.io/angular-calendar/#/kitchen-sink 我猜你知道它很受歡迎。 我將 Angular 6 與 AngularFire2 和 Firebase 一起使用。

這是我的 app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AngularFireModule } from 'angularfire2';
import { environment } from '../environments/environment';
import { NgModel, FormsModule } from '@angular/forms';
import { DragAndDropModule } from 'angular-draggable-droppable';
import { ResizeEvent } from 'angular-resizable-element';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
// tslint:disable-next-line:max-line-length
import {MatButtonModule, MatCheckboxModule, MatToolbarModule, MatSidenavModule, MatIconModule, MatListModule, MatGridListModule, MatCardModule, MatMenuModule, MatTableModule, MatPaginatorModule, MatSortModule} from '@angular/material';
import {LayoutModule} from '@angular/cdk/layout';
import { SidenavComponent } from './sidenav/sidenav.component';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { TableComponent } from './table/table.component';
import { AngularFirestoreModule } from 'angularfire2/firestore';
import { AngularFireStorageModule } from 'angularfire2/storage';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { CoreModule } from './core/core.module';
import { UserProfileComponent } from './user-profile/user-profile.component';
import { CalendarComponent } from './calendar/calendar.component';
import { ResizableModule } from 'angular-resizable-element';

@NgModule({
  declarations: [
    AppComponent,
    SidenavComponent,
    DashboardComponent,
    TableComponent,
    UserProfileComponent,
    CalendarComponent,
  ],
  imports: [
    ResizableModule,
    [DragAndDropModule.forRoot()],
    BrowserModule,
    AppRoutingModule,
    CoreModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule, // imports firebase/firestore, only needed for database features
    AngularFireAuthModule, // imports firebase/auth, only needed for auth features,
    AngularFireStorageModule, // imports firebase/storage only needed for storage features
    AppRoutingModule,
    [MatButtonModule, MatCheckboxModule],
    [BrowserAnimationsModule],
    LayoutModule,
    BrowserAnimationsModule,
    MatToolbarModule,
    MatButtonModule,
    MatSidenavModule,
    MatIconModule,
    MatListModule,
    MatGridListModule,
    MatCardModule,
    MatMenuModule,
    MatTableModule,
    MatPaginatorModule,
    MatSortModule,
  ],
  exports: [ RouterModule ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

好的，這是我的 calendar.component.ts

import {
  Component,
  ChangeDetectionStrategy,
  ViewChild,
  TemplateRef
} from '@angular/core';
import {
  startOfDay,
  endOfDay,
  subDays,
  addDays,
  endOfMonth,
  isSameDay,
  isSameMonth,
  addHours
} from 'date-fns';
import { Subject } from 'rxjs';
import {
  CalendarEvent,
  CalendarEventAction,
  CalendarEventTimesChangedEvent
} from 'angular-calendar';
import { NgbModal } from '../../../node_modules/@ng-bootstrap/ng-bootstrap';

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

@Component({
  selector: 'app-calendar',
  changeDetection: ChangeDetectionStrategy.OnPush,
  styleUrls: ['calendar.component.css'],
  templateUrl: 'calendar.component.html'
})
export class CalendarComponent {
  @ViewChild('modalContent') modalContent: TemplateRef<any>;

  view = '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 = true;

  constructor(private modal: NgbModal) {}

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

  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 {
    this.modalData = { event, action };
    this.modal.open(this.modalContent, { size: 'lg' });
  }

  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();
  }
}

日歷.component.html

    <ng-template #modalContent let-close="close">
  <div class="modal-header">
    <h5 class="modal-title">Event action occurred</h5>
    <button type="button" class="close" (click)="close()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <div>
      Action:
      <pre>{{ modalData?.action }}</pre>
    </div>
    <div>
      Event:
      <pre>{{ modalData?.event | json }}</pre>
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-secondary" (click)="close()">OK</button>
  </div>
</ng-template>

<div class="row text-center">
  <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">
  <mwl-calendar-month-view
    *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>

<br><br><br>

<h3>
  Edit events
  <button
    class="btn btn-primary pull-right"
    (click)="addEvent()">
    Add new
  </button>
  <div class="clearfix"></div>
</h3>

<table class="table table-bordered">

  <thead>
    <tr>
      <th>Title</th>
      <th>Primary color</th>
      <th>Secondary color</th>
      <th>Starts at</th>
      <th>Ends at</th>
      <th>Remove</th>
    </tr>
  </thead>

  <tbody>
    <tr *ngFor="let event of events; let index = index">
      <td>
        <input
          type="text"
          class="form-control"
          [(ngModel)]="event.title"
          (keyup)="refresh.next()">
      </td>
      <td>
        <input
          type="color"
          [(ngModel)]="event.color.primary"
          (change)="refresh.next()">
      </td>
      <td>
        <input
          type="color"
          [(ngModel)]="event.color.secondary"
          (change)="refresh.next()">
      </td>
      <td>
        <input
          class="form-control"
          type="text"
          mwlFlatpickr
          [(ngModel)]="event.start"
          (ngModelChange)="refresh.next()"
          [altInput]="true"
          [convertModelValue]="true"
          [enableTime]="true"
          dateFormat="Y-m-dTH:i"
          altFormat="F j, Y H:i"
          placeholder="Not set">
      </td>
      <td>
        <input
          class="form-control"
          type="text"
          mwlFlatpickr
          [(ngModel)]="event.end"
          (ngModelChange)="refresh.next()"
          [altInput]="true"
          [convertModelValue]="true"
          [enableTime]="true"
          dateFormat="Y-m-dTH:i"
          altFormat="F j, Y H:i"
          placeholder="Not set">
      </td>
      <td>
        <button
          class="btn btn-danger"
          (click)="events.splice(index, 1); refresh.next()">
          Delete
        </button>
      </td>
    </tr>
  </tbody>

</table>

我是 Angular 的初中生，我可能會錯過一些小東西。 如果你能幫我解決這個問題，我將不勝感激。 這是我得到的錯誤

未捕獲的錯誤：模板解析錯誤：無法綁定到“視圖”，因為它不是“div”的已知屬性。 (" class="btn btn-primary" mwlCalendarPreviousView [ERROR ->][view]="view" [(viewDate)]="viewDate" (viewDateChange)="activeDayIsOpen = false"> "): ng:/// AppModule/CalendarComponent.html@28:8 無法綁定到“viewDate”，因為它不是“div”的已知屬性。 (" mwlCalendarPreviousView [view]="view" [ERROR ->][(viewDate)]="viewDate" (viewDateChange)="activeDayIsOpen = false"> Previous "): ng:///AppModule/CalendarComponent.html@29 :8 無法綁定到“viewDate”，因為它不是“div”的已知屬性。 (" class="btn btn-outline-secondary" mwlCalendarToday [ERROR ->][(viewDate)]="viewDate"> Today "): ng:///AppModule/CalendarComponent.html@36:8 無法綁定“查看”，因為它不是“div”的已知屬性。 (" class="btn btn-primary" mwlCalendarNextView [ERROR ->][view]="view" [(viewDate)]="viewDate" (viewDateChange)="activeDayIsOpen = false"> "): ng:/// AppModule/CalendarComponent.html@42:8 無法綁定到“viewDate”，因為它不是“div”的已知屬性。 (" mwlCalendarNextView [view]="view" [ERROR ->][(viewDate)]="viewDate" (viewDateChange)="activeDayIsOpen = false"> Next "): ng:///AppModule/CalendarComponent.html@43 :8 找不到管道“calendarDate”（“

{{ [錯誤 ->]viewDate | calendarDate:(view + 'ViewTitle'):'en' }}

"): ng:///AppModule/CalendarComponent.html@50:11 無法綁定到 'viewDate'，因為它不是 'mwl-calendar-month-view' 的已知屬性。1. 如果 'mwl- calendar-month-view' 是一個 Angular 組件並且它有 'viewDate' 輸入，然后驗證它是這個模塊的一部分。 2. 如果 'mwl-calendar-month-view' 是一個 Web 組件然后添加 'CUSTOM_ELEMENTS_SCHEMA' 到此組件的“@NgModule.schemas”以抑制此消息。3. 要允許任何屬性，請將“NO_ERRORS_SCHEMA”添加到此組件的“@NgModule.schemas”。(" ][viewDate]="viewDate" [events] ="events" [refresh]="refresh" "): ng:///AppModule/CalendarComponent.html@79:4 無法綁定到 'events'，因為它不是 'mwl-calendar- 的已知屬性month-view'。1.如果'mwl-calendar-month-view'是一個 Angular 組件並且它有'events'輸入，那么驗證它是這個模塊的一部分。2.如果'mwl-calendar-month-view' ' 是一個 Web 組件然后將 'CUSTOM_ELEMENTS_SCHEMA' 添加到該組件的 '@NgModule.schemas' 以抑制此消息。 3. 到 允許任何屬性將“NO_ERRORS_SCHEMA”添加到此組件的“@NgModule.schemas”。 (" *ngSwitchCase="'month'" [viewDate]="viewDate" [ERROR ->][events]="events" [refresh]="refresh" [activeDayIsOpen]="activeDayIsOpen" "): ng:// /AppModule/CalendarComponent.html@80:4 無法綁定到“刷新”，因為它不是“mwl-calendar-month-view”的已知屬性。 1. 如果“mwl-calendar-month-view”是一個 Angular 組件並且它有“刷新”輸入，那么驗證它是這個模塊的一部分。 2. 如果“mwl-calendar-month-view”是一個 Web 組件，則將“CUSTOM_ELEMENTS_SCHEMA”添加到此組件的“@NgModule.schemas”以抑制此消息。 3. 要允許任何屬性，請將“NO_ERRORS_SCHEMA”添加到此組件的“@NgModule.schemas”。 (" [viewDate]="viewDate" [events]="events" [ERROR ->][refresh]="refresh" [activeDayIsOpen]="activeDayIsOpen" (dayClicked)="dayClicked($event.day)"") : ng:///AppModule/CalendarComponent.html@81:4 無法綁定到“activeDayIsOpen”，因為它不是“mwl-calendar-month-view”的已知屬性。 1. 如果“mwl-calendar-month-view”是一個 Angular 組件並且它有“activeDayIsOpen”輸入，那么驗證它是這個模塊的一部分。 2. 如果“mwl-calendar-month-view”是一個 Web 組件，則將“CUSTOM_ELEMENTS_SCHEMA”添加到此組件的“@NgModule.schemas”以抑制此消息。 3. 要允許任何屬性，請將“NO_ERRORS_SCHEMA”添加到此組件的“@NgModule.schemas”。 (" [events]="events" [refresh]="refresh" [ERROR ->][activeDayIsOpen]="activeDayIsOpen" (dayClicked)="dayClicked($event.day)" (eventClicked)="han"): ng:///AppModule/CalendarComponent.html@82:4 'mwl-calendar-month-view' 不是已知元素： 1. 如果 'mwl-calendar-month-view' 是 Angular 組件，則驗證它是此模塊的一部分。2. 如果“mwl-calendar-month-view”是 Web 組件，則將“CUSTOM_ELEMENTS_SCHEMA”添加到此組件的“@NgModule.schemas”以抑制此消息。（“
[錯誤 ->]) 在 JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:23930) 在 compiler.js:23840 在 Object.then (compiler.js :1007) 在 JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:23839)

Answer 1

看起來您為mwlCalendarPreviousView和mwlCalendarNextView指令使用的任何庫和mwl-calendar-month-view組件都沒有正確存在/導入。

---

您提供的示例鏈接包含指向此 StackBlitz的鏈接。 查看module.ts ，您的app.module.ts中缺少幾個模塊導入。 由於您遇到日歷問題，我認為您需要添加此導入

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    NgbModalModule.forRoot(),
    FlatpickrModule.forRoot(),
    CalendarModule.forRoot() <---- This One
  ],
  declarations: [DemoComponent],
  exports: [DemoComponent]
})
export class DemoModule {}

Answer 2

首先，通過 npm 安裝：

npm install --save angular-calendar date-fns

接下來將 CSS 文件包含在應用程序的全局（非組件范圍）樣式中：

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

最后將日歷模塊導入您的應用程序模塊：

import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CalendarModule, DateAdapter } from 'angular-calendar';
import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';

@NgModule({
  imports: [
    BrowserAnimationsModule,
    CalendarModule.forRoot({
      provide: DateAdapter,
      useFactory: adapterFactory
    })
  ]
})
export class MyModule {}

然后從源代碼中獲取相關的所有文件。

這應該可以解決您的問題。 編碼愉快！