标签: angular8

我从 hotjar 获取了跟踪代码，但指令不起作用。我正在尝试在单页应用程序中实现 hotjar。跟踪代码是一个脚本，npm 提供了这个方法来实现它。

import { NgxHotjarModule } from 'ngx-hotjar';


imports: [
    BrowserModule,
    NgxHotjarModule.forRoot('traking-code')
]

我有一个如下所示的图表组件：

<div id="chart">
    <ngx-charts-bar-horizontal [view]="view" [trimYAxisTicks]="false" [xAxisTickFormatting]="convertDecimalToNumber" [scheme]="colorScheme" [results]="data" [gradient]="gradient" [xAxis]="showXAxis" [yAxis]="showYAxis" [showXAxisLabel]="showXAxisLabel" [showDataLabel]="showDataLabel" [xAxisLabel]="xAxisLabel" [barPadding]="40">
    </ngx-charts-bar-horizontal>
</div>

我正在通过它的父 div 来操作该图表的所有样式，其中有id="chart"，但我需要在父组件中使用同一组件 2 次！所以这会产生相同的 2 个 id 的问题。

因此，我决定从父组件传递 div 的 id，如下所示@Input()：

<div class="container">
    <!-- Other tags -->
    <child-component [chartId]="users"></child-component>
    <!-- Other tags -->
    <child-component [chartId]="visuals"></child-component>
    <!-- Other tags -->
</div>

编辑子组件：

TS 文件：

@Input() chartId: string;

HTML：

<div [id]="chartId">
    <ngx-charts-bar-horizontal [view]="view" [trimYAxisTicks]="false" [xAxisTickFormatting]="convertDecimalToNumber" [scheme]="colorScheme" [results]="data" [gradient]="gradient" [xAxis]="showXAxis" [yAxis]="showYAxis" [showXAxisLabel]="showXAxisLabel" [showDataLabel]="showDataLabel" [xAxisLabel]="xAxisLabel" [barPadding]="40">
    </ngx-charts-bar-horizontal>
</div>

我尝试了这些技术： [id]="chartId", …

我当前的效果代码如下所示，这是我的效果代码，其中当前我正在从效果中分派单个操作。但我想再发送一个操作 notificationNew() ，我已在下面的效果代码中对此进行了注释。

    bookPropertyRequest$ = createEffect(() => {
    return this.actions$.pipe(
        ofType(ReservationReqActions.bookPropertyRequest),
        concatMap(action =>
            this.ReservationReqService.sendReservationRequest(action.reservationRequest).pipe(
                map(response => {
                    if (response.status) {
                        this.helperService.snackbar('Request Sent.');
                        // Here i want to dispatch another action - notificationNew()
                        return ReservationReqActions.bookPropertyRequestSuccess({ reservationRequest: response.result });
                    } else {
                        const errorCode = response.errorCode;
                        if (errorCode !== null) {
                            this.helperService.errorAlert('', response.message, 'error');
                            return ReservationReqActions.bookPropertyRequestFailure({
                                error: {
                                    type: response.errorCode || null,
                                    message: response.message
                                }
                            });
                        }
                    }
                }),
                catchError(error => EMPTY)
            )
        )
    );
});

Now I want to dispatch another …

我正在使用 Mat 日期选择器，其中有开始日期和结束日期，其中有一个验证，即结束日期不应小于开始日期

如果开始日期是 2020 年 1 月 12 日，结束日期可以是 2020 年 1 月 12 日或大于此日期，但不能是 2020 年 1 月 11 日。

目前我正在尝试使用 Min MAX 但这没有按预期工作

我在谷歌中尝试，所以没有正确

   <mat-form-field>
      <input matInput [matDatepicker]="fromDate" placeholder="Choose a date"
          [value]="getData(item2.firstPatientInDate)" [max]="today<item2.lastPatientInDate|| item2.lastPatientInDate == undefined?today:item2.lastPatientInDate" [(ngModel)]="item2.firstPatientInDate">
                    <mat-datepicker-toggle matSuffix [for]="pickerstart"></mat-datepicker-toggle>
                    <mat-datepicker #picker></mat-datepicker>
                </mat-form-field>

        <mat-form-field>
           <input matInput [matDatepicker]="pickerend" [max]="today" [min]="item2.firstPatientInDate"   placeholder="Choose a date"
                        [value]="getData(item2.lastPatientInDate)" [(ngModel)]="item2.lastPatientInDate">
                    <mat-datepicker-toggle matSuffix [for]="pickerend"></mat-datepicker-toggle>
                    <mat-datepicker #picker1></mat-datepicker>

                </mat-form-field>

我想知道如何在 ngFor 中使用条件切片管道来控制显示的数据？

例如，选择列表/网格上显示的视频数量，例如这些公共下拉列表：

我现在想做的是：

<app-example
      class="items-list-item"
      *ngFor="let item of datas.video | slice:0:1"
      [itemvideo]='item'>
</app-example>

但是，当我更改选择下拉列表中的值时，如何动态地执行此操作？

我在 ChangeDetectorRef 中收到以下错误。当其他组件使用 ChangeDetectorRef 时，不知道为什么它突然发生。有谁知道如何解决？它链接到 Kendo Grid 选择。

类型错误：无法读取未定义的属性“detectChanges”

export class DocumentPropertyGridComponent implements OnInit, OnChanges {

  public documentPropertyGridDataSelected: Array<DocumentPropertyGridData> = new Array<DocumentPropertyGridData>();

  constructor(private cdr: ChangeDetectorRef) { 
  }

  selectTest(e){
    this.documentPropertyGridDataSelected = e.selectedRows;
    this.cdr.detectChanges();
  }

HTML：

<div>
  Selected Count: {{documentPropertyGridDataSelected.length}}
<div>

我尝试使用 cloudinary API_URL 直接从我的前端（Angular 8）上传文件，但仍然收到相同的错误请求（400）和相同的错误“上传预设必须列入未签名上传的白名单”，即使我尝试了不同的解决方案，例如在 FormData 中提供预设名称，并在我的 cloudinary 设置中将预设设置为无符号，但仍然无法正常工作。有什么解决办法吗？

我的上传代码：

 const images = new FormData();
images.append('images', file);
images.append('upload_preset', [presetName]);
this.progressBar = true

const req = new HttpRequest('POST', 'https://api.cloudinary.com/v1_1/[cloudName]/image/upload', images, 
    {
     reportProgress: true,
  
   });
this.http.request(req).subscribe(event => {
  if (event.type === HttpEventType.UploadProgress) {
    const percentDone = Math.round(100 * event.loaded / event.total);
    console.log(`File is ${percentDone}% uploaded.`);
  } else if (event instanceof HttpResponse) {
    console.log('File is completely uploaded!');
  }
});

我有一个用户可以从各个页面访问的组件。当用户单击此组件中的“确定”按钮时，他应该被重定向到上一页，即。他到达此组件的页面。

我遇到了window.history.back(); 和this.router.navigate( '../' )。

另外，window.history.back(); 之间有什么区别？和 this.router.navigate( '../' )

我还想了解this.location.back()和之间有什么区别window.history.back()。

我有一个利用SignalR与桌面应用程序进行通信的应用程序。要使用SignalR，我需要在.ts文件中使用jQuery。但是，从Angular 7迁移到Angular 8后，它似乎不起作用。

我declare var $: any;像以前的Angular版本一样使用。不幸的是，$现在在控制台上显示空白。

那么，Angular v8是否不再支持以这种方式使用jQuery，还是在迁移中出现了其他问题？

更新：

我有通过npm加载的jQuery v3.3.1。

这使其成为全局（在angular.json中）

"scripts": [
         "./node_modules/jquery/dist/jquery.min.js",
         "./node_modules/signalr/jquery.signalR.js"
]

在角度教程中有以下示例：

<h3>
    <a [title]="product.name + ' details'">
      {{ product.name }}
    </a>
  </h3>

如果我这样写的话，它会很棒：

<h3>
    <a title="{{product.name + ' details'}}">
      {{ product.name }}
    </a>
  </h3>

有什么不同？最佳做法是什么？