标签: angular5

我已经将Google ReCaptcha(ng-recaptcha)组件安装到我的应用程序中,并且想知道是否有办法将一些样式应用于生成的子元素,在我的情况下,<re-captcha></re-captcha>元素.

例如:

re-captcha{
    border: 1px solid #ccc; /*works*/
}

re-captcha div{
    border: 1px solid #ccc; /*doesn't work*/
} 

您能否分享一些实现预期结果的经验？

更新:

但是,如果直接在DevTools中设置,则以下工作正常...

re-captcha div{
    border: 1px solid #ccc; 
} 

我的流程是登录页面 - >主页.

登录页面没有令牌,登录后,服务器提供令牌,用户被重定向到主页.

主页将令牌发送到服务器,令牌验证,服务器发回数据显示在前端.

问题:

HttpInterceptor在登录请求时触发Cannot read property 'token' of null.我想让拦截器以某种方式忽略登录api请求,并且只在令牌存在时才拦截后续调用.

在我BehaviorSubject的地址元素具有2属性。在此如何单独更新单个属性？

这是我的尝试：

myAddress:any = {
    "plot":32,
    "street":"D15 Road"
  }

  private address = new BehaviorSubject(this.myAddress);
  addressClass = this.address.asObservable();


  updateAddress(newAddress){
    this.address.next(newAddress);
  }

我正在尝试这样更新：

import { Component, Input, OnInit } from '@angular/core';
import { SharedObject } from './shared.object';

@Component({
  selector: 'hello',
  template: `
    <h1>Hello {{name}}!</h1>
    <h2>City Name in Hero : {{heroName}}</h2>
    <h3>{{plotNo}}</h3>
    <button (click)="updatePlot(44)">Update Ploat </button>
  `,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {

  @Input() name: string;

  plotNo:number;
  address:any;


  constructor(private shared:SharedObject){

  }

  ngOnInit(){
     this.shared.addressClass.subscribe((address) => {
       this.plotNo …

我需要在输入的每4位数字后添加一个空格，我要在控制台中获取它，我如何才能实现这一点来更改角度5的输入

我在以下.ts中使用的代码

  mychange(val) {
    const self = this;
    let chIbn = val.split(' ').join('');
    if (chIbn.length > 0) {
      chIbn = chIbn.match(new RegExp('.{1,4}', 'g')).join(' ');
    }
    console.log(chIbn);
    this.id = chIbn;
  }

html

<input class="customerno" (ngModelChange)="mychange($event)" [formControl]="inputFormControl" (keydown.backspace)="onKeydown($event)" maxlength="{{digit}}" (keyup)="RestrictNumber($event)" type="tel" matInput [(ngModel)]="id" placeholder="Customer No. ">

安慰

1
11
111
1111
1111 1
1111 11
1111 111
1111 1111
1111 1111 1
1111 1111 11
1111 1111 111
1111 1111 1111

注意：我从Angular 2改编而成：输入，卡号输入中每4位数字后添加连字符。但是我用空间改变了hypen

我已经使用Mat选择角度组件进行下拉，当我在下拉菜单（页面主体）之外单击时，需要触发一个事件。

<mat-select #select multiple (change)="onSubmit($event)" [(ngModel)]="emp">
    <mat-option *ngFor="let value of filter.default" [value]="value">
        {{value}}
    </mat-option>
</mat-select>

这是我的ts文件

export class AnotherComponent {
  public text: String;

  @HostListener('document:click', ['$event'])
  clickout(event) {
    if(this.eRef.nativeElement.contains(event.target)) {
      console.log("clicked inside");
    } else {
      console.log("clicked outside");
    }
  }

  constructor(private eRef: ElementRef) {

  }
}

它无法正常工作，请帮助

我想在更改mat-select时显示或隐藏表单字段。我用来显示或隐藏该过程的以下代码。但是它显示了一个错误：

无法读取未定义的属性“ valueFieldType”。

1）.html文件

    <mat-form-field style="width: 30%">
                 <mat-select formControlName="evaluationRuleField" placeholder="Select Field" [value]="evaluationRuleField" id="evaluationRuleField" name="evaluationRuleField"> 
                  <mat-option *ngFor="let evaluationRuleField of evaluationRuleFields" [value]="evaluationRuleField">{{ evaluationRuleField.viewValue }}</mat-option>
                </mat-select>             
              </mat-form-field>
<!--Start Dynamically Change Field-->
              <mat-form-field class="example-full-width" style="width: 30%" *ngIf = "evaluationRuleField.valueFieldType == 'text'">
                  <input matInput formControlName="evaluationRuleValue" placeholder="Value" [ngModel]="evaluationRuleValue" id="evaluationRuleValue" name="evaluationRuleValue" required>
              </mat-form-field>
              <mat-form-field class="example-full-width" style="width: 30%" *ngIf = "evaluationRuleField.valueFieldType == 'dropdwon'">
                <mat-select formControlName="evaluationRuleField" placeholder="Select Field" [(value)]="ruleValueFields" id="evaluationRuleField" name="evaluationRuleField" (change)="getValue()"> 
                  <mat-option *ngFor="let ruleValueField of ruleValueFields" [value]="ruleValueField.value">{{ ruleValueField.viewValue }}</mat-option>
                </mat-select>   
              </mat-form-field>
              <mat-form-field class="example-full-width" style="width: 30%" *ngIf = "evaluationRuleField.valueFieldType …

当我粘贴my_example_link到浏览器中时，文件会以适当的方式自动下载。但是，当我使用下面显示的源代码时，下载不起作用。单击download按钮后，我想下载文件。任何想法有什么问题吗？我没有任何错误。

user.service.ts：

DownloadFiles() {

    return this.http.get('my_example_link', {responseType: 'text'});

}

uploader.service.ts：

DownloadFile(){

      this.userService.DownloadFiles()
          .subscribe(
              (data) => this.downloadFile2(data)), // console.log(data),
              (error) => console.log("Error downloading the file."),
              () => console.info("OK");
}

downloadFile2(data: Response){
  var blob = new Blob([data], { type: 'text/csv' });
  var url= window.URL.createObjectURL(blob);
  window.open(url);
}

something.component.html：

<li class="nav-item" *ngIf="isCloud()">
    <a  (click)="this.UploaderService.DownloadFile()" download="file23.txt" style='cursor: pointer;' class="nav-link" target="_blank">
        <i class="nc-icon nc-basket"></i> Download
    </a>
</li>

我在屏幕中间有div.div包含一个提交按钮.当我点击"提交"屏幕位置下降到底部.我试图用window.scrollTo()滚动到元素,但它不起作用.我需要从component.ts做到这一点,我有一个事件,当我按下提交时调用.我将非常感谢你的帮助.

我正在尝试从Angular 5将base64字符串发布到我的api

首先，我必须将其从图像转换为base64，在Internet和MDN上进行检查之后，我开发了一种方法

  OnIDChange(event) {
    var file = event.target.files[0];
    var reader = new FileReader();
    reader.onloadend = this.handleReaderLoaded.bind(this, "Id");
    reader.readAsBinaryString(file);
  }

和

    handleReaderLoaded(readerEvt:any, indicator: string) {
     var binaryString = readerEvt.target.result;
     if (indicator == "Id") {
       this.Model.IDPhoto = btoa(binaryString);
     }
  }

我必须将此base64存储在模型属性中才能在api中发布

但是在控制台上，它给出错误“无法读取未定义的属性'结果'”

var binaryString = readerEvt.target.result;

我如何将图像转换为base64，如果还有其他更合适的方法（任何npm包或其他东西，也请让我知道）

提前致谢 。

来自MDN MDN链接的参考

我是Angular的新手，正面临这个问题。

我想检查变量的值elementRef是否在显示数据之前为空，因为我想显示图表。这是我的代码：

component.ts

@ViewChild('normalDeviasiDaily', {read: ElementRef}) normalDeviasiDaily: ElementRef;

component.html

  <div *ngIf="normalDeviasiDaily">
    <div #normalDeviasiDaily id="normalDeviasiDaily">
      <canvas style="width:100%; height:400px;"></canvas>
    </div>
  </div>
  <div *ngIf="!normalDeviasiDaily">
    <skeleton-item height="400px"></skeleton-item>
  </div>

我的问题是cannot read property nativeElement of undefined，有没有其他人遇到过，请帮助我。

谢谢。