Я нажимал, вероятно, на каждую ссылку, которая появлялась относительно «похожих вопросов», и я не понимаю, что здесь происходит. Я думаю, что что-то в моей настройке не так, и другие ответы у меня не работают.
У меня есть страница, на которой отображается список потенциальных клиентов через * 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)
Что мне не хватает? Пожалуйста, укажите мне правильное направление. Спасибо