使用 ngFor 在表单内动态设置离子输入值

Posted 2023-03-16

【中文标题】使用 ngFor 在表单内动态设置离子输入值

【英文标题】：Dynamically set ion-input value within form using ngFor

【发布时间】：2020-10-05 14:58:31

【问题描述】：

我可能已经点击了关于“类似问题”的每一个链接，但我不明白这里发生了什么。我认为我的设置有问题，其他答案对我不起作用。

我有一个通过 *ngFor 显示潜在客户列表的页面，我想将其更改为可编辑/可更新，因此我将其转换为反应形式，但“值”属性未显示任何内容。如果我将项目从 ion-input 组件中取出，它会将正确的值显示为纯 html，但它不是输入值。

例如，在 ion-card-title 中，显示“John Doe”：item.payload.doc.data().name。但是在离子输入 formControlName="eName" 的“值”属性中，同样的内容是空白的。

由于多人使用该页面，我正在订阅 firestore 集合，并且在添加新潜在客户或更改现有潜在客户时我需要实时更新。

我尝试过 [(ngModel)] 绑定，但无论我做什么，它都会使每个列表项都具有相同的数据集（除非我更改了索引，例如 item.payload.doc.data().name更改为 items[3].payload.doc.data().name 等）

列表项正在正确生成，当它不是表单时，它会为每个项目显示正确的数据。我只是不知道如何在打开潜在客户时让这些项目值成为设置的表单值。这个想法是您只需更改表单条目，单击保存，它就会更新。

所以回顾一下，我试图让“John Doe”（以及正确的后续名称）显示为使用此行的表单值： ion-input formControlName="eName" type="text" value=" item.payload.doc.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】：

也许我错过了它，但我在您的模板中找不到 ngFor。

一种方法是在订阅部分手动设置值。 比如：

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

在订阅方面，我更喜欢 StateManagement。 在这种情况下，Ngxs 及其精彩部分 Ngxs From。

您可以将数据直接绑定到表单，然后立即显示更改 - 两种方式。 也许你想仔细看看

【讨论】：

ngFor 位于 html 代码的第一行。 我在订阅数据时遇到的问题是我无法设置特定值，因为它需要为列表中的每个项目更改。我正在阅读您链接的 Ngxs，谢谢。