得到了预期表达式的插值 ({{}})答案

【问题标题】：Got interpolation ({{}}) where expression was expected得到了预期表达式的插值 ({{}})
【发布时间】：2017-07-16 08:05:49
【问题描述】：

我有以下 HTML，但出现异常。如何解决？

解析器错误：在预期表达式的位置得到插值 ({{}}) 在第 48 列 [!(editForm.controls.field_item_exportExpression_{{i}}?.dirty && editForm.controls.field_item_exportExpression_{{i}}?.invalid)]

<div class="form-group">
  <label class="form-control-label" for="field_exportExpression">exportExpression</label>
  <input class="form-control" type="text" id="field_item_exportExpression_{{i}}" name="item_exportExpression_{{i}}" [(ngModel)]="datatype.items[i].exportExpression" required>
  <div [hidden]="!(editForm.controls.field_item_exportExpression_{{i}}?.dirty && editForm.controls.field_item_exportExpression_{{i}}?.invalid)">
   <small class="form-text text-danger" [hidden]="!editForm.controls.field_item_exportExpression_{{i}}?.errors?.required" dpTranslate="dataconfiguration.validation.required"> This field is
                            required. </small>
 </div>
</div>

以下操作无效。说找到不需要的令牌[。

[hidden]="!editForm.controls.['item_exportExpression_' + i]?.errors?.required

以下不是在抱怨[而是在抱怨Cannot read property '0' of undefined

 [hidden]="!editForm.controls.item_exportExpression_[ i]?.errors?.required

【问题讨论】：

Parser Error: Got interpolation ({{}}) where expression was expected的可能重复
或其他几个关于同一错误消息的问题 - 鉴于您的代表，令人失望的缺乏研究。
@jonrsharpe 我已经看到那个帖子了，他有 $index ，答案是 {{$index}} 。我的情况是我有我，我投入了 {{i}} 份工作。
@jonrsharpe : 我是一周大的有棱角的人，我一点也不关心代表
我并不是说您确实（或应该）关心代表。我是说，不做研究就问问题不是我期望的人应该（基于他们当前的代表）已经对如何使用 SO 有一个很好的想法。如果你确实看过那篇文章，你为什么不提？

标签： angular angular2-template angular2-forms

【解决方案1】：

{{}} 从不与[prop]="..."或(event)="..."一起使用

<small class="form-text text-danger" 
       [hidden]="!editForm.controls.['field_item_exportExpression_' + i]?.errors?.required" dpTranslate="dataconfiguration.validation.required"> This field is
                        required. 
</small>

【讨论】：

【解决方案2】：

有 4 种类型的绑定：

属性绑定，即评估值需要[]
模型绑定 即[()] 不需要什么特别的
插值绑定 即{{}} 可以与一般属性一起使用
事件绑定即()与函数配合得很好

为了回答您的问题，这样的事情对我们有用：

<input type="checkbox" [id]="['model-'+i]" [(ngModel)]="model" name="model-{{i}}" (change)="changeHandler($event)" />

【讨论】：

'id' 绑定到一个数组...有什么区别：[id]="['model-'+i]" vs [id]="'model-'+i"？
@istibekesi 如果您同时实现这两种方法，是否有任何区别？我很久没有在 Angular 上工作过，所以不确定。
结果没有区别，因为['anything'].toString() === 'anything'... 我只是想知道是否有任何理由/实践来使用这个数组语法？（很可能没有。）

【解决方案3】：

模板

<div [hidden]="!checkIfInvalid(i, 'item_exportExpression_')">
                            <small class="form-text text-danger" [hidden]="isRequiredError(i, 'item_exportExpression_')" dpTranslate="dataconfiguration.validation.required"> This field is
                                required. </small>
    </div>

组件

checkIfInvalid( index: number, field: string ): boolean {
        const control = this.getControl( index, field );
        if ( control && control.dirty && !control.valid ) {
            return true;
        }
        return false;
    }

    isRequiredError( index: number, field?: string ): boolean {
        const control = this.getControl( index, field );
        if ( control && control.getError( "required" ) ) {
            return true;
        }
        return false;
    }

【讨论】：

this.getControl 表示
如何在组件中声明控件

【解决方案4】：

像这样使用而不是插值

  <button class="btn btn-primary" title="Edit" (click)="showEditModal(record.id)"><i class="fa fa-edit"></i></button>

【讨论】：