标签: angular5

使用 Angular 5。面对 class.name 属性的奇怪问题。我们在打字稿中有以下功能：

export class ApiService
{
  public list<T>(c: new(values: Object)=> T)
  {
    var cname = c.name;
    ....
  }
}

现在，如果我在 Angular (ng-build) 的开发版本中使用这个函数，如下所示：

export class Employee()
{
    public id:string;
    public name: string;

    constructor(values: Object = {}) {          
       Object.assign(this, values);          
    }
}

在某处的代码中：

var list = api.list(Employee);

以上有效，在列表函数中我得到 cname = 'Employee'

但是，如果我们使用 ng build --env=prod 构建此解决方案，代码将失败并且我们得到 cname = undefined。

为什么会发生这种情况，如何解决？在开发构建中编译和工作的东西不应该在生产中工作吗？

有人可以解释 angular 5 中延迟加载模块和动态组件加载之间的区别吗？我很难弄清楚何时使用什么。您能否为每个用例提供一个用例，以便我更好地理解它们？我对 angular 5 还很陌生……我知道延迟加载是关于模块的，而动态组件加载是关于组件的。

  <a href="javascript:void(0)" id="loginlink">login</a>

我已经javascript:void(0)多次看到这样的锚标记的 href 属性具有价值。我不知道这到底是什么意思。我在使用 angular 5 时看到了这个。为什么javascript:void(0)用作 href 属性的值？

对不起，如果我的问题很愚蠢，但我们的应用程序面临延迟问题。KEYPRESS 事件处理程序是罪魁祸首。我们在整个应用程序中使用以下指令。它KeyPress通过HostListener. 按下键时，该指令使用正则表达式检查值，并preventDefault在条件为假时执行。

private regexMap = { // add your own
    '999': /^([0-9]){0,3}$/g,
    '9999': /^([0-9]){0,4}$/g,
    ...
    ...
}

@HostListener('keypress', [ '$event' ])
public nInput(event: KeyboardEvent) {
    // Allow Backspace, tab, end, and home keys
    if (this.specialKeys.indexOf(event.key) !== -1) {
        return;
    }
    this.pattern = this.regexMap[this.validationFormat];
    const current: string = this.el.nativeElement.value;
    const next: string = current.concat(event.key);
    if (next && !String(next).match(this.pattern)) {
        event.preventDefault();
    }
}

我不知道如何解决这个问题。会debounceTime解决这个问题吗？我不确定如何向此方法添加去抖动。请有人帮我解决这个问题。

我正在使用角度材料从数组形式的数据创建表格。这一切都很好。我遇到的问题是字段本身需要是表单字段。它们需要从数据中填充，但可编辑。此外，带有空白字段的新行应该是可填充和持久化的。我发现虽然行数据填充，但值永远不会进入表单字段本身，或者表单字段都只由第一条记录填充。我引用字段值的方式有问题，但我看不到它是什么。所以，这是 html 中的表格：

<form #a="ngForm" >
  <mat-table #approvalsTable [dataSource]="approvalsDataSource"
             #approvalsSort="matSort" matSort matSortActive="description"
             matSortDirection="asc" style="width:900px;font-family: Arial, Helvetica, sans-serif; font-size:14px;">

    <ng-container matColumnDef="description">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Description</mat-header-cell>
      <mat-cell *matCellDef="let element; let i = index">
        <input type="text"
               name="description" [(ngModel)]="element.description" [value]="element.description">
        {{element.description}}

      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="approvalNumber">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Approval No.</mat-header-cell>
      <mat-cell *matCellDef="let element; let i = index">
        <input type="text"
               name="approvalNumber" [(ngModel)]="element.approvalNumber" [value]="element.approvalNumber">
        {{element.approvalNumber}}

      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="expires">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Expiration Date</mat-header-cell>
      <mat-cell *matCellDef="let element; let i = index">
        <input type="text"
               name="expires" [(ngModel)]="element.expires" [value]="element.expires">
        {{element.expires}}

      </mat-cell>
    </ng-container> …

我正在尝试以 angular 5 反应形式捕获 FormArray 控件的 valueChanges 事件。我有正常的表单组 valueChanges 事件和相同的工作正常但不适用于 formArray 控件。

我已将我的表单组定义为 -

this.ApplicationForm = this.fb.group({
  ApplicationPenalties: this.fb.array([this.preparePenaltyDetails()])
});

并初始化表单数组如下 -

preparePenaltyDetails(): FormGroup {
    return this.fb.group({
      Id: '',
      ApplicationId: '',
      RevisionNo: '',
      PenaltyMwh: ''
    });
  }

当我从我的 api 获取数据时，我将控件设置为 -

this.ApplicationForm.setControl('ApplicationPenalties', this.fb.array(this.application.ApplicationPenalties
              .map(x => this.fb.group(x)) || []));

我的 html 模板如下 -

<div formArrayName="ApplicationPenalties" *ngFor="let penalty of ApplicationPenalties.controls; let i=index">
                    <div [formGroupName]="i">
                      <div class="row pocCharges">
                        <div class="col-md-6">
                          <div class="form-group">
                            <h4 class="d-sm-block">Revision Number</h4>
                            <div class="input-group">
                              <input class="form-control form-control-sm" formControlName="RevisionNo" type="text">
                              <span …

我正在尝试让步进器根据用户停止的位置转到一组问题。我正在使用 selectedIndex，并将其设置为我从服务器检索到的数字。

网址：

  <mat-horizontal-stepper class="my-stepper" [linear]="true" #stepper="matHorizontalStepper" [selectedIndex]="currentQuestion">
    <mat-step *ngFor="let question of currentVideoCount">
      <ng-template matStepLabel>Question {{question}}</ng-template>
    </mat-step>
  </mat-horizontal-stepper>

打字稿：

  public currentVideoCount: number[];
  public currentQuestion: number;
ngAfterViewInit() {
    this.programId.subscribe((programId) => {
      this.evalService.getCurrentVideoCount(programId).subscribe(data => {
        this.currentVideoCount = data.videoCount;
        this.currentQuestion = data.question;
      });
    })
  }

这不起作用。如果我这样做，我会收到此错误。

ERROR Error: cdkStepper: Cannot assign out-of-bounds value to `selectedIndex`.

但是，如果我只是将 html 更改为不使用 currentQuestion，而只使用一个数字或一个我定义为 1、2 等的变量，它确实可以工作。如果我只是将 currentQuestion 放在 html 标签中，它会给我正确的数字。如果我在任何地方记录它，它会给我正确的数字。但是步进器本身不会使用该数字，并且仅当以这种方式为其提供数字时。如何让它对 selectedIndex 使用 currentQuestion？我认为它出错了，因为我在订阅中定义它的方式，但我不知道如何解决这个问题。

编辑：如果我将 currentQuestion 初始化为我期望 data.question 的数字，它可以工作，但如果我将它初始化为其他东西，则无效。显然不是我想要的，但仍然很有趣。

编辑：如果我默认将 selectedIndex 设置为超出范围，例如 3 个项目的数组中的 300 个，我不会收到超出范围的错误，它只会使整个步进器变灰。

使用角度材料 mat-table 时是否可以将特定数据行滚动到视图中cdk-table？

我试图在没有运气的情况下实现键盘滚动。

如果我的 FormGroup 的字段是模型绑定的，ala [(ngModel)]，并且在页面加载时填充，例如由于服务，我的提交按钮，它被保护为[disabled]="biodataForm.status !== 'VALID'"，不会被禁用。如果表格出现空白并且我正常填写，那么当表格正确填写时，警卫会通过。如果通过数据绑定填充了相同的确切值，则 biodataForm.status 值将保持无效，直到我更改每个字段的值。

我的感觉是，在填充数据绑定后，表单应该识别出它具有有效内容，因此它的状态应该从 INVALID 更改为 VALID ......这里出了什么问题？

我的表单标记如下所示：

  <form class="form" name="biodataForm" [formGroup]="biodataForm">
    <mat-form-field class="full-width">
      <input matInput placeholder="First Name" 
        required
        [(ngModel)]="_memberdata.firstname"
        [formControl]="firstnameFormControl">
      <mat-error *ngIf="firstnameFormControl.invalid">{{getRequiredErrorMessage('firstname')}}</mat-error>        
    </mat-form-field>
    <mat-form-field class="full-width">
      <input matInput placeholder="Last Name" 
        required
        [(ngModel)]="_memberdata.lastname"
        [formControl]="lastnameFormControl">
      <mat-error *ngIf="lastnameFormControl.invalid">{{getRequiredErrorMessage('lastname')}}</mat-error>                
    </mat-form-field>
    <mat-form-field class="full-width"
      hintLabel="Note: We'll send you an email with a link to click to prove it's you">
      <input matInput placeholder="Email" 
        required
        [(value)]="_memberdata.email"
        [formControl]="emailFormControl">
      <mat-error *ngIf="emailFormControl.invalid">{{getEmailErrorMessage()}}</mat-error>        
    </mat-form-field>    
    <mat-form-field class="full-width">
      <input matInput placeholder="Phone" type="tel" 
        [(value)]="_memberdata.phone"
        required …

我正在使用 angular 5 示例项目，想要使用 angular5 组件结构为屏幕截图或捕获屏幕视频构建功能。