1
누군가가 모달 대화 상자로 만들 CRUD로 나를 도울 수 있습니다. 이미 추가, 삭제를 관리했지만 편집해야합니다. 이미 각 레코드의 데이터를 해당 형식으로 캡처했지만 변경 내용을 저장할 수 없으면 다음 오류가 발생합니다. Error: Function DocumentReference.update() called with invalid data. Unsupported field value: undefined (found in field titulo). 나는 Firestore와 일하고있다.update() firestore CRUD 모달
케 - hacemos-admin.component.ts
import { Component, OnInit, Inject } from '@angular/core';
//Firestore
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from 'angularfire2/firestore';
import { Observable } from 'rxjs/Observable';
//Modal Material Design
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { AgregarComponent } from '../agregar/agregar.component';
import { EditarComponent } from '../editar/editar.component';
import { EliminarComponent } from '../eliminar/eliminar.component';
import { Title } from '@angular/platform-browser/src/browser/title';
export interface Servicios { titulo?: string; descripcion?: string };
export interface ServiciosId extends Servicios { id: string; };
@Component({
\t selector: 'app-que-hacemos-admin',
\t templateUrl: './que-hacemos-admin.component.html',
\t styleUrls: ['./que-hacemos-admin.component.scss']
})
export class QueHacemosAdminComponent implements OnInit {
\t titulo: string;
\t descripcion: string;
\t servicio: Servicios;
\t serviciosCollection: AngularFirestoreCollection<Servicios>;
\t serviciosObservable: Observable<Servicios[]>;
\t // dialogRef: MatDialogRef<EditarComponent>;
\t DocPredicate: any;
\t constructor(private afs: AngularFirestore, public dialog: MatDialog) { }
\t ngOnInit() {
\t \t this.getQueHacemos();
\t }
\t getQueHacemos() {
\t \t this.serviciosCollection = this.afs.collection('servicios', ref => ref.orderBy('titulo'));
\t \t this.serviciosObservable = this.serviciosCollection.snapshotChanges().map(arr => {
\t \t \t return arr.map(snap => {
\t \t \t \t const data = snap.payload.doc.data() as Servicios;
\t \t \t \t const id = snap.payload.doc.id;
\t \t \t \t return { id, ...data };
\t \t \t });
\t \t });
\t };
\t
\t agregarModal() {
\t \t let dialogRef = this.dialog.open(AgregarComponent, {
\t \t \t width: '550px'
\t \t });
\t };
\t editarModal(servicio) {
\t \t let dialogRef = this.dialog.open(EditarComponent, {
\t \t \t width: '550px',
\t \t \t data: {
\t \t \t \t titulo: servicio ? servicio.titulo :'',
\t \t \t \t descripcion: servicio ? servicio.descripcion : '',
\t \t \t }
\t \t });
\t \t dialogRef.afterClosed().subscribe(result => {
\t \t \t if (result) {
\t \t \t \t this.serviciosCollection.doc(servicio.id).update({
\t \t \t \t \t titulo: this.titulo,
\t \t \t \t \t descripcion: this.descripcion,
\t \t \t \t });
\t \t \t }
\t \t })
\t };
\t eliminarModal(servicio) {
\t \t let dialogRef = this.dialog.open(EliminarComponent, {
\t \t });
\t \t
\t \t dialogRef.afterClosed().subscribe(estado => {
\t \t \t if (estado) {
\t \t \t \t this.serviciosCollection.doc(servicio.id).delete();
\t \t \t }
\t \t })
\t };
}케 - hacemos-admin.component.html
,774,173,210
editar.component.ts
import { Component, OnInit, Inject } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
//Firestore
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from 'angularfire2/firestore';
import { Observable } from 'rxjs/Observable';
//Modal Material Design
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
export interface Servicios { titulo: string; descripcion: string }
export interface ServiciosId extends Servicios { id: string; }
@Component({
\t selector: 'app-editar',
\t templateUrl: './editar.component.html',
\t styleUrls: ['./editar.component.scss']
})
export class EditarComponent implements OnInit {
\t titulo: string;
\t descripcion: string;
\t form: FormGroup;
\t servicio: string;
\t serviciosCollection: AngularFirestoreCollection<Servicios>;
\t serviciosObservable: Observable<Servicios[]>;
\t constructor(
\t \t private afs: AngularFirestore,
\t \t public dialog: MatDialog,
\t \t public dialogRef: MatDialogRef<EditarComponent>,
\t \t @Inject(MAT_DIALOG_DATA) public data,
\t \t private formBuilder: FormBuilder
\t) { }
\t ngOnInit() {
\t \t this.getQueHacemos();
\t \t this.form = this.formBuilder.group({
\t \t \t titulo: this.data ? this.data.titulo : '',
\t \t \t descripcion: this.data ? this.data.descripcion : ''
\t \t })
\t }
\t getQueHacemos() {
\t \t this.serviciosCollection = this.afs.collection('servicios', ref => ref.orderBy('titulo'));
\t \t this.serviciosObservable = this.serviciosCollection.snapshotChanges().map(arr => {
\t \t \t return arr.map(snap => {
\t \t \t \t const data = snap.payload.doc.data() as Servicios;
\t \t \t \t const id = snap.payload.doc.id;
\t \t \t \t return { id, ...data };
\t \t \t });
\t \t });
\t }
\t editar() {
\t \t this.dialogRef.close(true)
\t }
\t cancelar(){
\t \t this.dialogRef.close(false)
\t }
}editar.component.html
<form action="" [formGroup]="form">
\t <div class="m-2">
\t \t \t <div class="text-center">
\t \t \t \t <h4 class="mb-4">Editar Servicio</h4>
\t \t \t </div>
\t \t \t <div class="form-group">
\t \t \t \t <label>Título del servicio</label>
\t \t \t \t <input type="text" class="form-control" placeholder="Título servicio" formControlName="titulo">
\t \t \t </div>
\t \t \t <div class="form-group">
\t \t \t \t <label>Descripción del servicio</label>
\t \t \t \t <textarea class="form-control" rows="8" placeholder="Descripción" formControlName="descripcion"></textarea>
\t \t \t </div>
\t \t \t <div class="text-right mt-3">
\t \t \t \t <button class="btn btn-light" (click)="cancelar()">Cancelar</button>
\t \t \t \t <button type="submit" class="btn btn-primary" (click)="editar()">Guardar cambios</button>
\t \t \t </div>
\t \t </div>
</form>
감사합니다. @Michael, 완벽하게 작동했습니다. 나는이 변수들이 어디에서 정의되어야하는지 궁금하다. (나는 두 요소 모두에서 이미'string'으로 정의되었다고 생각한다.) 설명에 감사한다. –
'this.form.value'에'this'를 추가해야한다는 것을 잊어 버렸습니다. –