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

问题描述

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

我有一个页面通过 *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)

我错过了什么？请指出我正确的方向。谢谢你

标签： angularfirebaseionic-frameworkreactive

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

问题描述

解决方案

推荐阅读