Как отобразить данные строки в форме при нажатии кнопки редактирования (угловой 8)

Question

Я хочу, чтобы данные строки отображались в полях формы, когда я нажимал кнопку редактирования в определенной строке таблицы, у меня есть только один (1) компонент, и моя таблица и форма находятся в одном файле component.html.Как я могу заставить его работать?

См. Мой пример кода ниже:

component.html

<tr *ngFor="let myCar of cars$ | paginate: { itemsPerPage: count, currentPage: p }; let i = index">
            <td>{{ (p - 1) * count + i + 1 }}</td>
            <td>{{myCar.name}}</td>
            <td>{{myCar.price}}</td>
            <td><button type="submit" class="btn btn-secondary" (click)="">
                    <i class="glyphicon glyphicon-edit"></i>Edit
                </button></td>
</tr>
<div class="col-sm-12">
        <form formGroup="editForm" autocomplete="off">
            <h4 align="center">
                <strong>Edit Car</strong>
            </h4>
            <div class="form-group">
                <label>Name:</label> <input type="text" class="form-control" formControlName="name">
            </div>
            <div class="form-group">
                <label>Price:</label> <input type="text" class="form-control" formControlName="price">
            </div>
            <button class="btn btn-secondary">
                <i class="glyphicon glyphicon-floppy-save"></i>Save
            </button>
        </form>
</div>

service.ts

....
// requesting data via http
getCars() {
   return this.http.get<Cam[]>(this.carsUrl);
}

component.ts

// imports
......
editForm: FormGroup;

constructor(...){...}

ngOnInit() {
   carList();
   carEditInit();
}
carList() {
   return this.carService.getCars()
     .subscribe(data => {
        this.cars$ = data;
   });
}

// I just initialised the form fields
carEditInit() {
   this.editForm = this.fb.group({
     name: [''],
     price: ['']
   )};
}

Как можно заставить работать эти коды или какие дополнения в файле .ts, чтобы после нажатия кнопкиКнопка «Редактировать», данные отправляются в поля формы. У меня есть и таблица * ngFor, и форма внутри одного компонента. Html

Спасибо

Answer 1

Назначить (щелкнуть) событие для функции и передать ее свой объект myCar для строки, в которой нажата кнопка редактирования

<tr *ngFor="let myCar of cars$ | paginate: { itemsPerPage: count, currentPage: p }; let i = index">
            <td>{{ (p - 1) * count + i + 1 }}</td>
            <td>{{myCar.name}}</td>
            <td>{{myCar.price}}</td>
            <td><button type="submit" class="btn btn-secondary" (click)="fillForm(myCar)">
                    <i class="glyphicon glyphicon-edit"></i>Edit
                </button></td>
</tr>

В файле .ts, определить функцию и задать поля формы с помощью setValue ():

fillForm(myCar)
{
   this.editForm.controls.name.setValue(myCar.name);
   // ... Do the same for rest of your form fields

  this.editForm.updateValueAndValidity(); //Update the values for all fields
}