Как использовать * ng для набора привязываемых свойств ngModel - PullRequest
Новая
       38

Как использовать * ng для набора привязываемых свойств ngModel

1 голос
/ 27 сентября 2019

Я пытаюсь использовать *ngFor для набора идентичных входов, за исключением свойства, к которому должен быть привязан вход. 

<mat-form-field *ngFor="let prop of [ID, Name, Nickname]">
    <input matInput type="text" placeholder="prop.key" #propInput [(ngModel)]="prop">
    <button mat-icon-button matSuffix mat-icon-button *ngIf="propInput.value" (click)="prop='';">
        <mat-icon>close</mat-icon>
    </button>
</mat-form-field>

 <!-- bind test -->
<input matInput type="text" placeholder="Name Test" #propInput [(ngModel)]="Name">

prop.key не работает, но это отдельный вопрос.

Вот привязанный компонент: 

import { Component } from '@angular/core';
import { EntitySrcService } from '../entity-src.service';

@Component({
  selector: 'app-entity-table',
  templateUrl: './entity-table.component.html',
  styleUrls: ['./entity-table.component.less']
})

export class EntityTableComponent {

  constructor(
    private entitySrc: EntitySrcService
    ) {}

  public get ID(): string {
    return this.entitySrc.id;
  }

  public set ID(value: String) {
    this.entitySrc.id = value;
  }

  public get Name(): string {
    return this.entitySrc.name;
  }

  public set Name(value: String) {
    this.entitySrc.name = value;
  }

  public get Nickname(): string {
    return this.entitySrc.altName;
  }

  public set Nickname(value: String) {
    this.entitySrc.altName = value;
  }

}

По большей части это работает, как и ожидалось, но кажется, что привязка [(ngModel)] только читает свойство и не записывает вЭто.Так, например, если я обновляю входные данные теста привязки, поле Имя в цикле ngFor обновляется, чтобы соответствовать, но обновление поля в цикле ngFor не обновляет поле в тесте.

Я использую get/set свойства в компоненте для прокси к фактическому месту хранения, но я понимаю, что свойство get/set должно действовать так же, как и обычное свойство (и использование обычного свойства имеет то же поведение одностороннего связывания).

Итак, как правильно перебрать набор свойств, с которыми я хочу связаться?

Ответы [ 3 ]

2 голосов
/ 27 сентября 2019

Похоже, что [ID, Name, Nickname] являются типами значений.В этом случае *ngFor просто использует их значения без привязки к исходным переменным.Если вам все еще требуется связывание, вам следует рассмотреть возможность преобразования их в ссылочные типы.

Например, вы можете поместить их в объект, например, person или options, и итерировать свойства объекта, используя KeyValuePipe: Как выполнить итерациюключи объекта с использованием * ngFor 

options: {[key: number]: string} = {ID: '1', Name: 'bar', Nickname: 'foo'};

<div *ngFor="let item of options | keyvalue">
1 голос
/ 27 сентября 2019

Массив [ID, Name, Nickname] содержит значения трех свойств, а не их ссылки.При двусторонней привязке будут изменяться элементы массива вместо исходных свойств (чтобы это работало, необходимо обратиться к элементам по их индексу и отслеживать массив по индексу, как показано в в этом ответе ).

Чтобы добиться двустороннего связывания свойств компонента, вы можете использовать массив имен свойств и ссылаться на каждое свойство с помощью this[prop]: 

<mat-form-field *ngFor="let prop of ['ID', 'Name', 'Nickname']">
  <input [(ngModel)]="this[prop]" ... >
  ...
</mat-form-field>

См. thisstackblitz для демонстрации.

0 голосов
/ 27 сентября 2019

В Angular 6.1 была введена KeyValuePipe, которая позволяет перебирать свойства объекта: 

<div *ngFor="let item of object | keyvalue">
  {{item.key}}:{{item.value}}
</div>

Документы: https://angular.io/api/common/KeyValuePipe

...