小编Lui*_*oso的帖子

在从版本5升级到6后的Angular应用程序中,使用DatePipe时发生此错误.

我正在保存mat-date- picker在Cloud Firestore中创建的Date()对象,其名称为date_field,当返回时尝试在屏幕上显示给用户但不显示.

我检查了数据库,它正确保存,但我无法在child_name字段中为用户显示在屏幕上.

当您尝试在mat-table中显示date_field列并使用DatePipe格式化日期错误时.

以下是HTML代码:

<ng-container cdkColumnDef="data_nascimento">
   <mat-header-cell *cdkHeaderCellDef mat-sort-header fxHide fxShow.gt-xs>Data de nascimento</mat-header-cell>
   <mat-cell *cdkCellDef="let paciente" fxHide fxShow.gt-xs>
      <p class="text-truncate">{{paciente.data_nascimento | date}}</p>
   </mat-cell>
</ng-container>

升级到Angular 6后,出现以下错误:

ERROR Error: InvalidPipeArgument: 'Unable to convert "Timestamp(seconds=1531364400, nanoseconds=0)" into a date' for pipe 'DatePipe'
    at invalidPipeArgumentError (common.js:4238)
    at DatePipe.push../node_modules/@angular/common/fesm5/common.js.DatePipe.transform (common.js:5151)
    at checkAndUpdatePureExpressionInline (core.js:10801)
    at checkAndUpdateNodeInline (core.js:11375)
    at checkAndUpdateNode (core.js:11333)
    at debugCheckAndUpdateNode (core.js:11970)
    at debugCheckRenderNodeFn (core.js:11956)
    at Object.eval [as updateRenderer] (PacientesComponent.html:81)
    at Object.debugUpdateRenderer [as updateRenderer] (core.js:11948)
    at checkAndUpdateView (core.js:11320) …

我可以在屏幕上显示多条消息而不与零食条重叠其他消息吗？

我有一个服务来在我的应用程序中显示消息，但问题是当发生多个事件时我需要在屏幕上显示消息，该消息会被要显示的最后一条消息覆盖。

我需要一种不重叠消息并在不替换其他消息的情况下在另一个消息下方显示消息的好方法。

我希望它的工作方式与 Toast 的工作方式相同，在不重叠的情况下在另一条消息下方显示一条消息。

我在下面这样做的方式，一次只在屏幕上显示一条消息。

小吃message.service.ts：

  horizontalPosition: MatSnackBarHorizontalPosition = 'center';
  verticalPosition: MatSnackBarVerticalPosition = 'top';

  constructor(
    public snackBar: MatSnackBar){}

  showMessage(message: string) {
    this.snackBar.open(message, 'Close', {
      duration: 5000,
      horizontalPosition: this.horizontalPosition,
      verticalPosition: this.verticalPosition,
    });
  }

我需要显示时间间隔为 15，可由用户配置。

我尝试了下面的方法，但显示如下：

我需要以 15 或 30 分钟的间隔显示：15:15 - 15:30 - 15:45

html 组件：

<mwl-calendar-week-view [dayStartHour]="8" [dayStartMinute]="0" [precision]="'minutes'" 
[hourSegments]="4" [dayEndHour]="18" [dayEndMinute]="0" 
*ngSwitchCase="'week'" [excludeDays]="[0,6]" [viewDate]="viewDate" 
(viewDateChange)="selectedDay = {date:$event}" [events]="events" 
[refresh]="refresh" (dayClicked)="dayClicked($event.day)" 
(eventClicked)="edit($event.event" (eventTimesChanged)="eventTimesChanged($event)">
</mwl-calendar-week-view>

CSS：

.cal-week-view {

   .cal-hour-segment.cal-after-hour-start .cal-time {
       display: block;
   }
}

不加载从Cloud Firestore返回的日期.

在我将依赖关系更新package.json到最新版本之后,我的更改对Angular 6中的应用程序产生了很大影响.

我无法将Timestamp类型的值加载到Cloud Firestore返回的DatePicker类型的字段中.

在升级之前,我返回了一个类型的对象,Date ()并在更新后返回Cloud Firestore Timestamp.

我相信此更新中Firebase返回的类型有一些变化.

Datepicker字段必须接收一个Date ()对象,而不是一个Timestamp.

我必须遍历从Cloud Firestore返回的所有记录,并调用该toDate ()方法来获取Date ()对象并将其加载到DatePicker中.

有没有办法将Datepicker的类型更改为Timestamp？否则,我无法从Cloud Firestore收到Timestamp类型的值.

的package.json:

{
  "name": "myapp",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --open",
    "start-hmr": "ng serve --hmr -e=hmr -sm=false",
    "start-hmr-sourcemaps": "ng serve --hmr -e=hmr",
    "build": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev",
    "build-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev --stats-json",
    "build-prod": …

我在Angular中有一个配置了 PWA 的应用程序，除了缓存之外，assets/images我还想在在线时加载Firebase 存储中的图像时对其进行缓存。

我的应用程序使用启用了数据持久性的Cloud Firestore数据库。当我需要在离线模式下在系统上加载经过身份验证的用户的头像时，它会尝试通过字段加载photoURL，但由于它处于离线状态，我无法加载图像，因此图像不会显示，这对于用户。

在我的代码中，我加载图像如下：

<img class="avatar mr-0 mr-sm-16" src="{{ (user$ | async)?.photoURL || 'assets/images/avatars/profile.svg' }}">

我希望它在离线时，它会在缓存中的某个位置搜索已上传的图像。

每次我加载图像来调用某种方法来存储缓存图像或其他东西时，这都会非常烦人，我知道这是可能的，但我不知道该怎么做。

可以通过ngsw-config.json配置文件来实现吗？

ngsw-config.json：

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/*.css",
          "/*.js"
        ],
        "urls": [
          "https://fonts.googleapis.com/css?family=Muli:300,400,600,700"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

在我的 Angular 应用程序中，我的 @ViewChild 实例无法填充 HTL matSort。

我的组件.ts：

import { MatSort } from '@angular/material';

export class MyClassComponent {
     @ViewChild(MatSort) sort: MatSort;

}

ngOnInit() {
    console.log(this.sort); // undefined
}

我的组件.html：

<mat-table #table [dataSource]="dataSource" matSort>
           .......................................................
           .......................................................

</mat-table>

我需要使用 matSort 中的 sortChange 但它总是返回未定义。

该dateClick事件无法正常进行，我完全按照文档中的说明进行了操作：

https://fullcalendar.io/docs/angular

的HTML：

    <full-calendar #calendar (dateClick)="alert('clicked')" defaultView="timeGridWeek"
        [nowIndicator]="true" [header]="header" [plugins]="calendarPlugins" [events]="[
          { title: 'event 1', start: '2019-05-22T13:00:00', textColor: 'white', end: '2019-05-22T14:00:00'  },
          { title: 'event 2', start: '2019-05-23T14:00:00', end: '2019-05-23T15:00:00' }
        ]"></full-calendar>

ts：

import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';

  public calendarPlugins = [dayGridPlugin, timeGridPlugin, listPlugin];