In my angular app I am trying to save image and text inside a table. Everything is working fine. I can add the the data, I can get the data. But the problem is if I click on save, data shows inside the table but only texts can be seen without refresh, image is showing the alt image value. But if I refresh the page the page it works perfectly.

and in the table I can see something like this,

Here is my service file :

  @Injectable({
      providedIn: 'root'
    })
    export class CategoriesService {
      private categories:Category[] = [];
      private categoryUpdated = new Subject<Category[]>();
    
      constructor(private http : HttpClient, private router: Router) { }
    
      getUpdateListener(){
        return this.categoryUpdated.asObservable();
      }
        /* posting request */
        addCategory(name: string, image: File){
          const categoryData = new FormData();
          categoryData.append('name', name);
          categoryData.append('image',image, name);
          this.http.post<{message : string, category: Category}>(
            'http://localhost:3000/api/v1.0/categories',categoryData
          ).subscribe(responseData=>{
            const category : Category = {
              id: responseData.category.id,
              name : name,
              image : responseData.category.image
            }
            this.categories.push(category);
            this.categoryUpdated.next([...this.categories]);
          })
        }
    /* getting categories, data must be as backend i.e message and object */  
      getCategories(){
        this.http.get<{message: string; categories: any}>(
            "http://localhost:3000/api/v1.0/categories"
        )
        .pipe(map((cateData)=>{
            return cateData.categories.map(category=>{
                return {
                    id: category._id,
                    name : category.name,
                    image: category.image
                }
            })
        }))
        .subscribe(transformedCate =>{
            this.categories = transformedCate;
            this.categoryUpdated.next([...this.categories])
        })
    
      }
    
         
    }

and my main component.ts file :

export class CategoriesComponent implements OnInit,OnDestroy{
  togglePanel: any = {};
  categoryPanel: any = {};

  categories : Category[] = [];
  private categorySub : Subscription;

  constructor(private _categoriesService : CategoriesService, private dialog : MatDialog){}
  ngOnInit(){
    this._categoriesService.getCategories();
    this.categorySub = this._categoriesService.getUpdateListener().subscribe((cate: Category[])=>{
      this.categories = cate;
    }) 
  }

  OnFormOpen(){
    this.dialog.open(CategoryFormComponent)
  }

  ngOnDestroy(){
    this.categorySub.unsubscribe();
}
}

and my form component :

  export class CategoryFormComponent implements OnInit {
      
      form : FormGroup;
      imagePreview : string;
    
      constructor(private dialogRef : MatDialogRef<CategoryFormComponent>,
        @Inject (MAT_DIALOG_DATA) private data : any,
        private _categoriesService : CategoriesService) {}
    
      onCancel(){
        this.dialogRef.close();
      }
    
      ngOnInit(): void {
        this.form = new FormGroup({
          name : new FormControl(null,{validators:[Validators.required, Validators.minLength(3)]}),
          image : new FormControl(null,{validators: [Validators.required], asyncValidators : [mimeType]})
        })
      } 
    
      /*event for checking the image after load  */
      onImgPicked(event : Event){
        const file = (event.target as HTMLInputElement).files[0];
        this.form.patchValue({image: file});
        this.form.get('image').updateValueAndValidity();
        // console.log(file);
        // console.log(this.form)
        const reader = new FileReader();
        reader.onload = () =>{
          this.imagePreview = reader.result as string;
        };
        reader.readAsDataURL(file);
      }
     /*On category added */
     OnCategoryAdded(){
      //is loading
      this._categoriesService.addCategory(this.form.value.name, this.form.value.image);
      this.form.reset();
      this.dialogRef.close();
     }
      
    }

Setting a timeout on ngOnInit works but I want to make it without settiimeout

 setTimeout(() => {
      this.OnInit();
       },10000) 
     }

CodePudding user response：

It looks you are misunderstanding the properties of the http response in addCategory. Try modifying as below.

addCategory(name: string, image: File){
  const categoryData = new FormData();
  categoryData.append('name', name);
  categoryData.append('image',image, name);
  this.http.post<{message : string, category: Category}>(
    'http://localhost:3000/api/v1.0/categories',categoryData
  ).subscribe(responseData=>{
    const category : Category = {
      id: responseData._doc.id,                     // here
      name : name,
      image : responseData._doc.image               // here
    }
    this.categories.push(category);
    this.categoryUpdated.next([...this.categories]);
  })
}