在需要表达式的位置出现了插值符号({{}})。

Question

我有以下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 

- Saurabh Kumar

---

可能是重复的问题：解析器错误：在预期表达式的位置得到插值（{{}}）。 - jonrsharpe

@jonrsharpe，我已经看到了那篇帖子，他使用了$index，而答案中使用了{{$index}}。我的情况是我使用了i并放在{{i}}中，但不起作用。 - Saurabh Kumar

@jonrsharpe：我是一个刚学一周的Angular新手，我完全不在意声誉。 - Saurabh Kumar

然后将这些研究结果放在问题中 - “我读了X并尝试了Y，但发生了Z”。否则，就像上面所说的那样，人们最终会告诉你一些你已经知道的事情。同样，这是你应该已经知道的事情（例如串行投票违反规则）。 - jonrsharpe

@BrianOgden：您能否推荐一些关于您建议的教程？由于我是 Angular 的新手，所以我无法很好地跟上您的步伐。 - Saurabh Kumar

Answer 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>

- Günter Zöchbauer

Answer 2

有4种绑定类型：

• 属性绑定，即需要使用[]来评估值
• 模型绑定，即不需要任何特殊要求的[()]
• 插值绑定，即可用于一般属性的{{}}
• 事件绑定，即与函数搭配使用的()

为了回答您的问题，我们尝试了类似这样的内容：

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

- Zameer Ansari

---

'id'绑定到一个数组...有什么区别吗：[id]="['model-'+i]"和[id]="'model-'+i"？ - István Békési

@istibekesi 如果你同时实现这两个，会有什么区别吗？我很久以前就没有使用过Angular了，所以不太确定。 - Zameer Ansari

结果没有区别，因为 ['anything'].toString() === 'anything' ... 我只是想知道是否有任何理由 / 实践使用这个数组语法？（很可能没有。） - István Békési

Answer 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;
    }

- Saurabh Kumar

---

this.getControl 意味着什么。 - Ravi Teja

如何在组件中声明控件。 - Ravi Teja

Answer 4

使用这种方式代替插值

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

- Abdus Salam Azad