web-dev-qa-db-ja.com

式が期待されていた補間（{{}}）を取得しました

次のHTMLがありますが、例外が発生します。修正方法

パーサーエラー：[！（editForm.controls.field_item_exportExpression _ {{i}} ?. dirty && editForm.controls.field_item_exportExpression _ {{i}} ?. invalid）の列48で式が予期されていた補間（{{}}）を取得しました]

<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
angularangular2-templateangular2-forms
35
Saurabh Kumar

テンプレート

<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;
    }
9
Saurabh Kumar

{{}}neverは[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>
63
Günter Zöchbauer

バインディングには4つのタイプがあります。

  • プロパティバインディングつまり、値を評価するには[]が必要です
  • モデルバインディングすなわち[()]特別なものは必要ありません
  • 補間バインディングすなわち{{}}は一般的な属性で使用できます
  • イベントバインディングつまり()は関数でうまく機能しました

あなたの質問に答えるために、このような何かが私たちのために働いた：

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

補間の代わりにこのように使用します

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