标签: angular6

我已经用于mat-datepicker我的 Angular 6 项目。但是在日期选择器中显示当前时区日期。而不是这个，我需要显示当前的 UTC 日期。

这是我的代码

.ts 文件

var nowDate       =  new Date();
this.startdate    =  nowDate;
this.enddate      =  nowDate;

.html 文件

<mat-form-field style="margin-right: 25px;">
                    <input matInput [matDatepicker]="picker_start" placeholder="Start Date" [(ngModel)]="startdate" [ngModelOptions]="{timezone: 'UTC'}">
                    <mat-datepicker-toggle matSuffix [for]="picker_start"></mat-datepicker-toggle>
                    <mat-datepicker #picker_start></mat-datepicker>
                  </mat-form-field>

我在 ngOnInit 函数中有一个带有 setTimeOut 函数的组件。要为此编写单元测试用例，我使用 tick 和 fakeAsync 来快进 setTimeOut。但是，它不会被执行，而不会调用其他函数 closeAlert()。

组件代码：

export class BannerComponent implements OnInit {

  @Input()errorData: any;

  @Input()callback: any;

  @Input()autoHide: boolean;

  constructor() { }

  ngOnInit() {

    if (this.autoHide) {
      setTimeout
        (() => {
          this.closeAlert();
        }, 500);
    }
  }

  closeAlert() {
    this.errorData = null;
    if (this.callback) {
      this.callback();
    }
  };
}

规范文件：

describe('BannerComponent', () => {
  let component: BannerComponent;
  let fixture: ComponentFixture<BannerComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ BannerComponent ]
    })
    .compileComponents();
  }));

  beforeEach(async() => {
    fixture = …

我正在尝试在我的 angular 7 项目中使用save-svg-as-png库。

但是，我无法让它发挥作用。我已经使用

npm install --save save-svg-as-png

我可以在 node_modules 下看到库。

不幸的是，该库是一个旧式的 javascript 库，我不知道我需要做什么才能在我的打字稿组件中访问它。

自述文件引用了显然存在类型定义的Typings库。但是，Typings 页面提到它在 TypeScript 2 中已被弃用，所以我没有追求这个。

显然有@types/save-svg-as-png支持原生 Angular 2+，但是当我尝试安装它时

npm install --save @types/save-svg-as-png

找不到库 ( npm ERR! code 404)。

我用谷歌搜索了更多并在 github上遇到了这个问题，有人显然已经通过将它包含在 angular-cli.js 文件中来让它与 Angular 2 一起工作，但是随着对 Angular 的更改，这个文件在版本 7 中不再存在，我不知道现在需要怎么做。

我还发现了以下关于如何将 javascript 库集成到 Angular 2+ 中的文章，但其中大部分依赖于 @types 可用（它们不是，见上文）并且只有一个简短的部分关于如何提供你自己的库typings.d.ts文件，但玩了很长一段时间后，我没有进一步。是否有更详细的解释说明如何使用这种方法？

我还在stackoverflow 上找到了这篇关于如何将基于 IIFE 的库集成到打字稿应用程序中的文章，但没有让它工作。

我已将以下行添加到我的index.html文件中 …

我试图找出如何设置 Apache Tomcat 服务器以在页面刷新时为 Angular 应用程序提供服务的方法。

路由仅在我单击时才起作用，但如果手动输入路径或者如果我进行页面刷新，则会出现 404 错误。

HTTP 状态 404 – 未找到

1）构建角度应用程序：

ng build --prod --base-href ./

2）我还在apache tomcat中添加了重写规则

在 $ApacheLocation/conf/context.xml 中

<Valve className="org.apache.catalina.valves.rewrite.RewriteValve" />

在 $ApacheLocation/conf/server.xml

<Valve className="org.apache.catalina.valves.rewrite.RewriteValve" />

但它对我不起作用。

我将不胜感激任何帮助。

我正在使用以下方法发送数据。我想在我的组件上显示错误响应。如何在我的组件中控制台日志错误消息？

组件.ts

signup(){ 
    return this.loginservice.signupUser(this.model).subscribe(data => {
        console.log(data.error);
    });
}

服务

signupUser(signupuserModel: any = {}):Observable<any>{
    return this.http.post(`${this.signuouserurl}`,signupuserModel)
}

错误信息

我正在使用 Angular 6。我只想通过使用innerHTML. 我尝试了以下代码，但它不起作用。在组件文件中，我在构造函数里面写了如下代码：

this.anchor = "<a routerLink='login'>Dynamic Login</a>"

在模板文件中，我写了以下代码：

<div [innerHtml]="anchor"></div>

日历在第一次加载时不显示事件。例如，仅当我触发任何事件（例如单击按钮）以将视图从月更改为周时。

我正在使用Angular Calendar 6 + LINK

我的项目是用Angular 6 制作的。

日历在第一次加载时不显示数据，只有在我触发任何事件之后才显示。

一切都按预期工作，所以我将给出 Html（其中的一部分）和最重要的：在这种情况下最重要的。

HTML ...

<div [ngSwitch]="view">
          <mwl-calendar-month-view *ngSwitchCase="CalendarView.Month" [viewDate]="viewDate" [events]="events"
            [refresh]="refresh" [activeDayIsOpen]="activeDayIsOpen" (dayClicked)="dayClicked($event.day)"
            (eventClicked)="handleEvent('Clicked', $event.event)" (eventTimesChanged)="eventTimesChanged($event)"
            [locale]="locale" [weekStartsOn]="weekStartsOn" [weekendDays]="weekendDays" >
          </mwl-calendar-month-view>
          <mwl-calendar-week-view *ngSwitchCase="CalendarView.Week" [viewDate]="viewDate" [events]="events"
            [refresh]="refresh" (eventClicked)="handleEvent('Clicked', $event.event)"
            (eventTimesChanged)="eventTimesChanged($event)" [locale]="locale" [weekStartsOn]="weekStartsOn"
            [weekendDays]="weekendDays" (beforeViewRender)="beforeMonthViewRender($event)">
          </mwl-calendar-week-view>
          <mwl-calendar-day-view *ngSwitchCase="CalendarView.Day" [viewDate]="viewDate" [events]="events"
            [refresh]="refresh" (eventClicked)="handleEvent('Clicked', $event.event)"
            (eventTimesChanged)="eventTimesChanged($event)" [locale]="locale" >
          </mwl-calendar-day-view>
        </div>

...

打字稿...

import {
  Component,
  ChangeDetectionStrategy,
  ViewChild,
  TemplateRef,
  OnInit
} from "@angular/core";
import {
  CalendarEvent,
  CalendarView,
  DAYS_OF_WEEK,
  CalendarEventAction,
  CalendarEventTimesChangedEvent,
  CalendarDateFormatter
} …

我想在mat-step中为不同的表单设置不同的宽度。第一个表单的内容宽度为400px，第二个表单内容的宽度为700px。

<mat-horizontal-stepper labelPosition="bottom" #stepper>
  <mat-step [stepControl]="firstFormGroup">
    <form [formGroup]="firstFormGroup">
      <ng-template matStepLabel>Fill out your name</ng-template>
       <div style="width:400px">
 <mat-form-field>
        <input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
      </mat-form-field>

       </div>

      <div>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>
  <mat-step [stepControl]="secondFormGroup">
    <form [formGroup]="secondFormGroup">
      <ng-template matStepLabel>Fill out your address</ng-template>
      <div style="width:700px">
         <mat-form-field>
        <input matInput placeholder="Address" formControlName="secondCtrl" required>
      </mat-form-field>
      </div>


      <div>
        <button mat-button matStepperPrevious>Back</button>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Done</ng-template>
    You are now done.
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button (click)="stepper.reset()">Reset</button>
    </div>
  </mat-step>
</mat-horizontal-stepper>

但它不起作用，任何人都可以帮助我如何实现这一目标。

我将 Calendly 小部件嵌入到一个简单的 Angular 应用程序中。它适用于 Chrome、Firefox 和 Edge，但在 IE 中只显示一个空白的白框。

该网站的工作网址是https://cei-demo.firebaseapp.com/schedule-an-appointment

我曾尝试使用 innerHTML 从组件而不是在模板中呈现 HTML 代码。我有同样的问题。

calendly.component.html

<div class="my-5 p-3 container bg-white text-dark">
  <div class="calendly-inline-widget" data-url="https://calendly.com/test-cei" style="min-width:320px;height:700px;"></div>
</div>

index.html（body 标签正上方）

<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"></script>

我希望小部件显示在所有浏览器中。

下面是响应 Dmitry Pashkevich 的代码：

组件.ts

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

@Component({
  selector: 'app-calendly',
  templateUrl: './calendly.component.html',
  styleUrls: ['./calendly.component.css']
})
export class CalendlyComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
}

组件.html

<div class="my-5 p-3 container bg-white text-dark">
  <div class="calendly-inline-widget" style="min-width:320px;height:580px;" data-auto-load="false">
</div> …

我正在创建一个必须以csv格式下载文件的网页。
REST API 返回文件。

访问 Api 时出现错误。
我想这是因为文件正在转换为 JSON。我怎样才能从后端得到它并处理它。

服务.ts

return this.http.get(URL);