Как отобразить, заполнить детали не массива в html ANGULAR

Question

Мне нужно отобразить значение этой функции, чтобы у меня было несколько вводов данных в этой таблице, и когда щелкнул значок глифа карандаша, он открывает открытый модал, в котором я хочу заполнить данные выбранной опции редактирования, как должны появиться идентификатор и имя выбранного имени, как мне установить значения

   <table class="table table-scroll table-striped ">
                  <thead>
                    <tr>
                      <th class="col-md-2" scope="col">ID</th>
                       <th class="col-md-2" scope="col">name(%)</th>
                      <th class="col-md-3" scope="col">Actions</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr
                      *ngFor="let data of showData"
                      id="{{ data.id }}"
                    >

                      <td>{{ data.id}}</td>
                      <td>{{ dada.name }}</td>
                      <td>
                        <span
                          class="glyphicon glyphicon-pencil"
                          (click)="request(data, template)"
                        ></span>
                      </td>
                    </tr>
                  </tbody>
                </table>

TS

  request(data, template) {

    this.popupDetails = data;
    this.openModal(template);
  }

, поэтому в консоли данные дают мне все эти данные

   name: "Riya Sharma"
    id: 18

ОТКРЫТЬ МОДАЛЬНЫЙ ШАБЛОН --- мне нужно отобразить его в моем заполнителе в моем шаблоне, как для идентификатора

<table class="table table-scroll table-striped ">
                      <thead>
                        <tr>
                          <th class="col-md-2" scope="col">ID</th>
                           <th class="col-md-2" scope="col">name(%)</th>

                        </tr>
                      </thead>
                      <tbody>
                        <tr

                        >

                          <td><input
                    type="number"
                    min="0"
                    formControlName="id"
                    class="form-control input-sm "
                    placeholder="{{ data.id }}"
                  /></td>
                          <td><input
                    type="number"
                    min="0"
                    formControlName="id"
                    class="form-control input-sm "
                    placeholder="{{ data.id }}"
                  /></td>
                        </tr>
                      </tbody>
                    </table>

как мне сделать это, потому что использование ngfor дает мне сообщение об ошибке, может ' я могу использовать для этого метод исправления?

Answer 1

Используйте [placeholder]="{{popupDetails.id}}" в вашем входном теге.

Answer 2

Я так понимаю, вам нужно отобразить свойство объекта { "name": "Riya Sharma", "id": 18 }. И похоже, что вы присвоили ответ объекта переменной popupDetails. Вы можете использовать его в шаблоне, чтобы использовать значения.

Контроллер

popupDetails: any;   // <-- define value here

request(data, template) {
  console.log(data);   // <-- log the `data` here
  this.popupDetails = data;
  this.openModal(template);
}

<div class="form-group">
<input
  type="number"
  min="0"
  formControlName="id"
  class="form-control input-sm "
  placeholder="{{ popupDetails.id }}"
/>

Я бы также сказал вам go по крайней мере Angular прохождение Tour of Heroes здесь , чтобы получить представление о структуре Angular.