передача значений внутри формы в угловых

Question

Я создал страницу с таблицами для отображения данных с ngFor:

<tr *ngFor="let mission of missions">


    <td>1</td>
    <td>{{mission.cliente}}</td>
    <td>{{mission.luogo}}</td>
    <td>{{mission.materiale}}</td>
    <td>{{mission.nCassoni}}</td>
    <td>{{mission.operatore}}</td>
    <td>{{mission.nota}}</td>
    <td>2/12</td>
    <td>3</td>
    <td>2</td>
    <td nowrap>
        <span class="dropdown">
            <div class="dropdown-menu dropdown-menu-right">
               <a (click)="editMission(mission);" class="dropdown-item"><i class="la la-edit"></i> Modifica dettagli</a>
            </div>
         </span>
            <i class="la la-edit"></i>
         </a>
</td>

, для каждой строки есть кнопка редактирования (click)="editMission(mission);, которая передает данные миссии:

cliente: "mario"
id: "HKJaQxnATtPtiIDCmnHx"
luogo: "cremona"
materiale: "Gomma"
nCassoni: 3
nota: ""
operatore: "Mario Rossi"

И вызывает функцию editMission внутри моего компонента:

editMission(mission){
console.log(mission); //this log into the console my mission json data
  if (this.showHideEditMission == false)
        this.showHideEditMission = true;
    else this.showHideEditMission = false;
}

, чтобы показать div, содержащий форму:

<div *ngIf="showHideEditMission" class="ng-hide m-portlet m-portlet--full-height ">
  <form #form="ngForm" (ngSubmit)="create(form.value); form.reset();" >
    <div class="m-portlet__body">
        <div class="form-group m-form__group">
            <label >Cliente</label>
            <input required ngModel name="cliente" #cliente="ngModel" value="mission.cliente" id="cliente" class="form-control m-input" placeholder="Inserisci il nome del Cliente" >

        </div>
    </div>
  </form>
</div>

Теперь, как я могу показать значение mission.cliente внутри поля ввода?

Спасибо.

ОБНОВЛЕНИЕ Я пробовал с [(ngModel)]="mission.cliente", но он не работает.

Answer 1

<form #form="ngForm" >
      <label >Cliente</label>
      <input required [(ngModel)]='mission.cliente' name="cliente" id="cliente" placeholder="Inserisci il nome del Cliente" >
</form>

в компоненте объявляют переменную с именем mission.

mission: any = {};
editMission(mission){
    this.mission = mission;
}

Answer 2

<input required [(ngModel)]="mission.cliente" name="cliente" #cliente="ngModel" id="cliente" class="form-control m-input" placeholder="Inserisci il nome del Cliente" >

Используйте [(ngModel)] вместо value.