Interpolation obtenue ({{}}) où l'expression était attendue

Question

J'ai le code HTML suivant mais j'obtiens une exception. Comment résoudre ce problème ?

D'Erreur de l'analyseur: Got interpolation ({{}}) où l'expression a été prévu au niveau de la colonne 48 [!(editForm.les contrôles.field_item_exportExpression_{{i}}?.sale && editForm.les contrôles.field_item_exportExpression_{{i}}?.non valide)]

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

La suite n'est pas de travail. En disant non désirés jeton [ trouvé.

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

La suite n'est pas de se plaindre [ mais se plaindre Cannot read property '0' of undefined

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

Answer 1

{{}} ne va jamais ensemble avec [prop]="..." ou (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>
 

Answer 2

Il existe 4 types de liaisons:

• Propriété de liaison c'est à dire [] requis pour évaluer les valeurs
• La liaison de modèle c'est à dire [()] requis rien de spécial
• L'Interpolation de liaison c'est à dire {{}} pourrait être utilisée avec des attributs généraux
• Liaison d'événements c'est à dire () a travaillé beaucoup avec les fonctions

Pour répondre à votre question, quelque chose comme ce qui a fonctionné pour nous:

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

Answer 3

modèle

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

composant

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

Answer 4

Utiliser comme ceci au lieu d'interpolation

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