Динамически установить значение ионного ввода в форме с помощью ngFor - PullRequest
Новая
       18

Динамически установить значение ионного ввода в форме с помощью ngFor

0 голосов
/ 16 июня 2020

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

У меня есть страница, на которой отображается список потенциальных клиентов через * ngFor, и я хотел изменить ее, чтобы она была редактируемой / обновляемой, поэтому я повернул это в реактивную форму, но свойства "значения" ничего не показывают. Если я извлекаю элемент из компонента ion-input, он показывает правильное значение как plain html, но это не входное значение.

Например, в заголовке ion-card-title это показывает " Джон Доу ": {{item.payload.do c .data (). Name}}. Но в свойстве "value" свойства ion-input formControlName = "eName" то же самое пусто.

Я подписываюсь на коллекцию firestore, так как страницу используют несколько человек, и мне нужно в режиме реального времени обновляется, когда добавляются новые лиды или изменяются существующие.

Я пробовал привязать [(ngModel)], но в результате каждый элемент списка имел один и тот же набор данных независимо от того, что я делал (если я не изменил индекс, например, item.payload.do c .data (). name изменен на, items [3] .payload.do c .data (). name et c.)

Элементы списка создаются правильно, и когда это не форма, для каждого элемента отображаются правильные данные. Я просто не могу понять, как сделать так, чтобы эти значения элементов уже были заданными значениями формы при открытии лида. Идея состоит в том, что вы можете просто изменить записи формы, нажать «Сохранить», и она будет обновлена.

Итак, напомним, я пытаюсь получить "John Doe" (и соответствующие последующие имена), чтобы они отображались в форме значение, используя эту строку: ion-input formControlName = "eName" type = "text" value = "item.payload.do c .data (). name"

Вот соответствующие части кода:

. html

<ion-card *ngFor="let item of items; let i = index;">
<ion-card-header>
  <ion-card-subtitle>{{item.payload.doc.data().created.seconds * 1000 | date:'MM/dd/yy' }} </ion-card-subtitle>
  <ion-row>
    <ion-col>
      <ion-card-title>{{item.payload.doc.data().name}} | {{item.payload.doc.data().dates}} </ion-card-title>
    </ion-col>
    <ion-col size="1" class="ion-text-right">
      <ion-button fill="outline" (click)="expandItem(item)">View</ion-button>
    </ion-col>
  </ion-row>
</ion-card-header>

<ion-card-content>
  <app-expandable expandHeight="300px" [expanded]="item.expanded">

      <form [formGroup]="existingLeadForm" class="existingLeadForm" (ngSubmit)="doUpdateLead(item.payload.doc.id)">
        <ion-grid>
      <ion-row>
        <ion-col size="6" size-sm>
          <ion-item>
          <ion-label position="stacked">Name</ion-label>
          <ion-input formControlName="eName" type="text" value="item.payload.doc.data().name"></ion-input>
        </ion-item>
        </ion-col>
        <ion-col size="6" size-sm>
          <ion-item>
          <ion-label position="stacked">Email</ion-label>
          <ion-input formControlName="eEmail" type="email" value="item.payload.doc.data().email"></ion-input>
        </ion-item>
        </ion-col>
        <ion-col size="6" size-sm>
          <ion-item>
          <ion-label position="stacked">Phone</ion-label>
          <ion-input formControlName="ePhoneNumber" type="tel" value="item.payload.doc.data().phoneNumber"></ion-input>
        </ion-item>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col size="12" class="ion-text-right">
          <ion-button color="primary-gradient" type="submit">
            <ion-icon name="save"></ion-icon>
            Update
          </ion-button>
          <ion-button color="dark" (click)="archiveLead(item)">
            <ion-icon name="albums"></ion-icon>
            Archive
          </ion-button>
        </ion-col>
      </ion-row>
    </ion-grid>
    </form>

  </app-expandable>
</ion-card-content>

.ts 

existingLeadForm:FormGroup;
items: any = [];    
subscription$: Subscription;

  this.existingLeadForm = this.formBuilder.group({
    eEmail: ['', Validators.compose([Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$'), Validators.required])],
    eName: ['', Validators.required],
    ePhoneNumber: ['', Validators.required],
  })

            this.subscription$ = this.firestore.collection('leads', ref => ref.where('archived','==',false).orderBy('created','asc'))
        .snapshotChanges().subscribe(data => {
          this.items = data
          this.items.expanded = false
          console.log(data)
        });

«console.log (this.data)» показывает: 

(5) [{…}, {…}, {…}, {…}, {…}, expanded: false]
0: {type: "added", payload: {…}, expanded: false}
1: {type: "added", payload: {…}, expanded: false}
2: {type: "added", payload: {…}, expanded: false}
3: {type: "added", payload: {…}, expanded: false}
4: {type: "added", payload: {…}, expanded: false}
expanded: false
length: 5
__proto__: Array(0)

Что мне не хватает? Пожалуйста, укажите мне правильное направление. Спасибо

1 Ответ

0 голосов
/ 16 июня 2020


возможно, мне его не хватает, но я не могу найти ngFor в вашем шаблоне.

Одним из способов может быть установка значения вручную в части подписки.
Что-то вроде: 

this.existingLeadForm.controls['email'].setValue(emailFromData)

Когда дело доходит до подписок, я предпочитаю StateManagement .
В данном случае Ngxs с его замечательной частью Ngxs From .

Вы можете привязать данные непосредственно к вашей форме и взамен мгновенно отображать изменения - в обоих направлениях.
Может быть, вы хотите поближе познакомиться

...