标签: angular5

我一直在尝试实现应用程序范围的拦截器，但是，我一直看到以下错误：

TypeError: this.interceptor.intercept is not a function

经过大量调试后，我意识到它发生的原因是因为我有一个从子组件调用的服务。当我使用 app.component 中的自定义拦截器时，一切正常，但是如果我从子组件中使用它，则会出现该错误。我很茫然。这是一个代码示例。我的设置方式与我的应用程序的设置方式大致相同：

https://angular-rbbkvv.stackblitz.io/test/index（没有验证；没有进行 POST，因此收集了数据）

如您所见，我正在显示错误，即上面发布的错误。最重要的是，如果您遵循网络选项卡，您将看不到正在执行的 POST。

我在这个问题上花了几天时间，我不知所措。我真的希望我在做一些非常简单的错误。

我非常感谢您的帮助！

我正在尝试上传不同的文档。但是当我第二次选择一个文件时，问题就出现了，它被添加到 fileArray 中，它不会被替换。

例如，我为第一个输入选择了一张图片。然后我决定为相同的输入选择不同的图片，然后它会被添加到一个文件数组中，所以当我上传它时，我不想上传的前一张图片也会被上传。

是否有任何解决方案（除了使用单个按钮上传多个文件），以便当我第二次选择文件时，它将被替换而不是添加到文件数组中？

uploadDocument.html 文件：

<form (ngSubmit)=f.form.valid && formSubmit() #f="ngForm">

        <input type="file" class="form-control ml-2" name="photo" ng2FileSelect [uploader]="uploader" />
          <input type="file" class="form-control ml-2" name="document1" ng2FileSelect [uploader]="uploader" />
            <input type="file" class="form-control ml-2" name="pic2" ng2FileSelect [uploader]="uploader" />

    <button type="submit" class="btn btn-danger btn-lg btn-fill">Upload</button>

</form>

uploadDocument.component.ts 文件：

import { Component, OnInit, Renderer, ElementRef } from '@angular/core';
import { UserService } from '../_services';
import { ActivatedRoute, Router, Params} from '@angular/router';
import { FileUploader } from 'ng2-file-upload/ng2-file-upload';
import { FileSelectDirective } from 'ng2-file-upload';

const …

这是我的 html 模板

<mat-card>
    <mat-card-content>
        <h2 class="example-h2">Select Employee</h2>    
        <section class="example-section">
            <mat-checkbox  [(ngModel)]="checked">Select All</mat-checkbox>
        </section>   
        <section class="example-section" *ngFor="let r of emp">
            <mat-checkbox class="example-margin" [(ngModel)]="checked">{{r.name}}</mat-checkbox>
        </section> 
    </mat-card-content>
</mat-card> 

这是代码工作不正常，如果我点击全选，它选择所有复选框，如果我选择单个复选框，它也选择所有项目。

请帮忙。

我正在使用 Angular 5，并尝试将字符串转换为日期。在 Chrome 中工作正常，但在 Internet Explorer 11 中，我收到无效日期的错误。我尝试了多种方法，但都没有成功。我也遵循此处提供的解决方案 解决方案提供我作为输入的字符串是 '2018-04-23 15:21:15 +0300' (value)，我使用以下代码：

var a = new Date(value);

我还尝试了以下方法：

var a = new Date (new Date(value));

我有一个拍卖应用程序，我需要在其中显示每个用户的实时出价。我想使用的技术是前端的 Angular 6、实时通信的 Signal R 和后端 api 的 Asp.net MVC。我尝试使用@aspnet/signalR 以及 ng2-signalR

以下是我的一些代码：

App.component.ts

import { Component, Injectable } from '@angular/core';
import { SignalR, SignalRConnection, ISignalRConnection, BroadcastEventListener } from '../../node_modules/ng2-signalr';
import { Route, ActivatedRoute, Resolve } from '@angular/router';
import { BidService } from './app.service';
import { BidBlotter } from './Bid.Model';
import * as signalR from '@aspnet/signalr';
import { HubConnection } from '@aspnet/signalr';

// import '~/signalr/hubs';
declare var $: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent …

我在验证多个逗号分隔的电子邮件地址到一个收件人字段时遇到问题。我在验证一封电子邮件方面没有问题。任何指针都非常感谢。我的代码在下面谢谢。

html

<form ng-submit="onSend()" [formGroup]="sendEmailForm">
<div class="email-field">
    <mat-form-field>
      <input matInput #emailTo placeholder="to@company.ca, to@company.ca..." formControlName="toAddress">
    </mat-form-field>
</form>

打字稿

ngOnInit() {

this.sendEmailForm = this.fb.group({
  toAddress: new FormControl('', [Validators.email, Validators.required])        

});

}

我是否必须编写任何自定义验证器？

我在组件中有父子关系。如果我更新父组件中的值绑定对象，那么它必须在子组件中通知。

子组件

export class childComponent implements OnChanges {
@Input() data = { name: "Datta" };

ngOnChanges() {
  console.log('updated');
}

父组件.html

<child-com [data]="localData"></child-com>
<button (click)="buttonClick()">changeData</button>

父组件

 export class ParentComponent  {
localData: any;

buttonClick() {
  this.localData.name = "sagar";
}

如果我更改绑定对象的引用，则它会反映，但如果我更新对象中的特定值，则不会反映。

在 Angular 5 中，我想从本地主机（服务器）下载图像。我已经有了带有路径的图像名称：http://localhost/projectName/uploads/3/1535352341_download.png 现在我想通过单击按钮下载。

在 Angular 的 HTML 视图中，我编写了以下代码：

<button (click)="downloadImage(car.carItem.carTitle)" type="button" class="btn btn-sm btn-info btn-action" tooltip="Download Image" placement="left" container="body"><i class="fa fa-download" aria-hidden="true"></i></button>

在 .ts 文件中，我执行以下操作，但它会在同一选项卡中打开图像：

downloadImage(imagePath){
  window.location = imagePath;
}

我已经浏览了Angular 4 直接下载图片的帖子，但找不到任何解决方案。所以请不要将其标记为重复。

我在我的 Angular 应用程序 ( https://danielykpan.github.io/date-time-picker/ ) 中使用 NgPickDatetime，当我尝试翻译标签和消息时遇到问题。我按照文档中的说明操作，它工作正常，但问题是当我更改站点语言时，标签仍然使用以前的语言。

我的代码是：

日期时间-locale.module.ts：

import { NgModule } from '@angular/core';
import { OwlDateTimeModule, OwlNativeDateTimeModule, OwlDateTimeIntl} from 'ng-pick-datetime';
import { DefaultIntl } from './datepicker-locale.component';


@NgModule({
    imports: [OwlDateTimeModule, OwlNativeDateTimeModule],
    providers: [
        {provide: OwlDateTimeIntl, useClass: DefaultIntl},
    ],
})
export class DateTimeLocaleModule {
}

datepicker-locale.component.ts：

import { OwlDateTimeIntl } from 'ng-pick-datetime';

export class DefaultIntl extends OwlDateTimeIntl {
    public cancelBtnLabel = 'Annuleren';
    public setBtnLabel = 'Opslaan';
    private currentLang;

    constructor() {
        super();

        this.getLang();
    }

    public getLang() {
        this.currentLang = JSON.parse(localStorage.getItem("language")); …

我想将“全选”和“取消全选”按钮添加到带有组划分的垫子选择中。

我的代码在这里可用：https : //stackblitz.com/edit/angular5-selectall-with-groups?file=app/select-reset-example.html

此代码基于此用于简单 mat-select 的工作演示：https : //stackblitz.com/edit/angular-material-select-multi-c6vtux?file=app%2Fapp.component.ts

在我的代码中，我需要遍历 4 个数组，因此我开始测试第一个数组的“selectAll()”函数。但是，即使 [ngModel] 显示该函数采用数组内的所有值，也只会选中第一个复选框。我还需要使这个函数适用于其他三个数组。

我希望有人能帮我解决这个问题。如果有更好的方法来完成我想要实现的目标，我也可以更改代码。