Angular: родитель не обновляет sh при передаче типа enum от child - PullRequest
0 голосов
/ 24 февраля 2020

У меня проблема с потоком данных между родительским и дочерним компонентами. У меня есть список объектов, каждый из которых можно редактировать в модальном. Все издания работают нормально, кроме одного - перечислений. Здесь приведены соответствующие фрагменты кода.

Родитель (Cost-list.component.ts)

<ng-container *ngFor="let ex of expenses$">
        <tr (click)="selected = ex">
          <th scope="row">{{ ex.id }}</th>
          <td>{{ ex.paymentDate }}</td>
          <td>{{ ex.expenseType['description']}}</td>
          {{ex.expenseType}}
          <td>{{ ex.value }}</td>
          <td>{{ex.description}}</td>
          <td>
            <button type="button" class="btn btn-info"
                    data-toggle="modal" data-target="#expenseModalEdit">Edit
            </button>
            <button type="button" class="btn btn-danger"
                    data-toggle="modal" data-target="#expenseModalDelete">Delete
            </button>
          </td>
        </tr>
      </ng-container>

Родитель HTML (Расход-list.component. html)

export class ExpenseListComponent implements OnInit {

  keys: any[];
  types = ExpenseType;
  selected: Expense;
  expenses$: Expense[];

  @ViewChild('editModal', {static:false}) expenseModal: ExpenseEditModalComponent;

  constructor(
    private route: ActivatedRoute,
    private service: ExpenseService) {
    this.keys = Object.keys(this.types).filter(String);
  }

  ngOnInit() {
    this.service.findAll()
      .subscribe(data => {
          this.expenses$ = data;
        },
        err => console.error(err),
        () => console.log('done loading expenses'));

  }

Ребенок (расход-edit-modal.component.ts)

 <form #exForm="ngForm" class="justify-content-center">

      <div class="form-group">
        <label for="expenseType">Type</label>
        <select id="expenseType" class="form-control" name="type" [(ngModel)]="expense.expenseType" #type="ngModel">
          <option selected>{{expense.expenseType["description"]}}</option>
          <option *ngFor="let exType of keys(types)" [value]="exType">{{types[exType]}}</option>
        </select>
      </div>

Ребенок HTML (расход-edit-modal.component. html)

export class ExpenseEditModalComponent {
  @ViewChild('exForm', {static: false}) exForm : NgForm;
  @Input() expense: Expense;
  closeResult: string;
  keyCount: number = 0;

  //* keys: any[];
  //* mapping of expense type enum
  keys = Object.keys;
  types = ExpenseType;
  //*

  constructor(private modalService: NgbModal, private service: ExpenseService) {
    //*this.keys = Object.keys(this.types).filter(String);
  }

Теперь, когда я изменяю значение costType в динамическом режиме c, предыдущее значение из списка расходов исчезает и появляется после обновления sh страницы (из-за тела функции onInit). У кого-нибудь есть идеи, как с этим бороться? Я изо всех сил старался, но не нашел ответов. Эти перечисления в TS для меня несколько хитры ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...