Как сделать так, чтобы в заголовке появилась некоторая информация о клиенте

#angular

Вопрос:

У меня есть таблица, в которой указано несколько клиентов (клиенты в виде списка); когда я нажимаю на код клиента, я получаю подробное представление этого конкретного клиента, в котором я могу изменить его данные.

Когда я получу подробное представление, я хочу «Отредактировать профиль «фамилия клиента» «имя клиента» » в качестве заголовка.

Для этого я написал в коде «Редактировать профиль {{клиент.фамилия}} {{customer.name}}», за исключением того, что ни фамилия, ни имя не указаны.

Как я могу изменить код, чтобы фамилия и имя клиента отображались в заголовке?

 <div class="panel panel-default">
    <div class="panel-heading">
      <h1 style="text-align: center">Customer</h1><br>
      <div class="row" [hidden]="!deleteMessage">
  
        <div class="col-sm-4"></div>
        <div class="col-sm-4">
          <div class="alert alert-info alert-dismissible">
            <button type="button" class="close" data-dismiss="alert">×</button>
            <strong>Customer Data Deleted</strong>
          </div>
        </div>
        <div class="col-sm-4"></div>
      </div>
    </div>
  
  
    <div class="panel-body">
      <table class="table table-hover table-sm">
        <thead class="thead-light">
          <tr>
            <th>Customer Code</th>
            <th>Surname</th>
            <th>Name</th>
            <th>Actions</th>
  
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let customer of customers">
            <td>{{customer.customercode}}</td>
            <td>{{customer.surname}}</td>
            <td>{{customer.name}}</td>
            <td><button (click)="deleteCustomer(customer.customercode)" class='btn btn-primary'><i
                  class="fa fa-futboll-0">Delete</i></button>
              <button type="button" class="btn btn-primary" (click)="openModal(editProfileModal, customer)" >Update</button>
            </td>
          </tr>
        </tbody><br>
      </table>
    </div>
  </div>
  
  <ng-template #editProfileModal let-modal>
    <div class="modal-header">
      <h5 class="modal-title" id="editProfileLabel">Edit Profile of {{customer.surname}}  {{customer.name}}</h5>
      <button type="button" class="close" (click)="modal.dismiss()" aria-label="Close">
      <span aria-hidden="true">amp;times;</span>
     </button>
    </div>
  
    <div class="modal-body">
      <form [formGroup]="editProfileForm" (ngSubmit)="updateCust()">
        <div class="form-group row">
          <label for="customercode" class="col-sm-4 col-form-label">Customer code</label>
          <div class="col-sm-8">
            <input type="text" class="form-control" formControlName="customercode" id="customercode">
          </div>
        </div>
        <div class="form-group row">
          <label for="surname" class="col-sm-4 col-form-label">Surname</label>
          <div class="col-sm-8">
            <input type="text" class="form-control" formControlName="surname" id="surname">
          </div>
        </div>
        <div class="form-group row">
          <label for="name" class="col-sm-4 col-form-label">Name</label>
          <div class="col-sm-8">
            <input type="text" class="form-control" formControlName="nome" id="name">
          </div>
        </div>
        
        <div class="modal-footer">
          <button type="submit" class="btn btn-success" [hidden]="isupdated">Confirm update</button>
          <button type="button" class="btn btn-danger" data-dismiss="modal" (click)="modal.dismiss()">Close</button>
        </div>
      </form>
    </div>
  </ng-template>

Ответ №1:

Решение

Измените свой модал, чтобы ссылаться на какую-либо другую переменную, такую как selectedCustomer, как показано ниже

  <ng-template #editProfileModal let-modal>
    <div class="modal-header">
      <h5 class="modal-title" id="editProfileLabel">Edit Profile of {{selectedCustomer.surname}}  {{selectedCustomer.name}}</h5>
      <button type="button" class="close" (click)="modal.dismiss()" aria-label="Close">
      <span aria-hidden="true">amp;times;</span>
     </button>
    </div>

И в вашей функции openModal установите эту переменную для клиента

 selectedCustomer;
openModal(modalRef, customer){
 this.selectedCustomer = customer;
 // open the modal, etc.
}

Объяснение

клиент определяется только в теге, который имеет *ngFor, т. е.

   <!--customer is undefined here->
          <tr *ngFor="let customer of customers">
  <!--customer is defined here->
            <td>{{customer.customercode}}</td>
            <td>{{customer.surname}}</td>
            <td>{{customer.name}}</td>
            <td><button (click)="deleteCustomer(customer.customercode)" class='btn btn-primary'><i
                  class="fa fa-futboll-0">Delete</i></button>
              <button type="button" class="btn btn-primary" (click)="openModal(editProfileModal, customer)" >Update</button>
            </td>
  <!--customer is defined here->
          </tr>
  <!--customer is undefined here->