Angular 如何从配方中删除照片错误无法读取未定义的属性“splice”

我正在尝试从我的食谱中删除照片，这是在删除该项目，但我有一个错误： 无法读取未定义的属性“splice” 照片已删除，但我无法正确查看警报。要查看效果，我必须刷新页面。 我该怎么办

为我服务：

deletePhoto(userId: number, recipeId: number, id: number) {
  return this.http.delete(this.baseUrl + 'users/' + userId + '/recipes/' + recipeId + '/photos/' + id);
}

在我的组件中：

import { Component, OnInit, ViewChild, Input } from '@angular/core';
import { Recipe } from 'src/app/_models/recipe';
import { ActivatedRoute } from '@angular/router';
import { RecipeService } from 'src/app/_services/recipe/recipe.service';
import { AuthService } from 'src/app/_services/auth.service';
import { AlertifyService } from 'src/app/_services/alertify.service';
import { NgForm } from '@angular/forms';
import { RecipePhoto } from 'src/app/_models/recipePhoto';

@Component({
  selector: 'app-recipe-edit',
  templateUrl: './recipe-edit.component.html',
  styleUrls: ['./recipe-edit.component.css']
})
export class RecipeEditComponent implements OnInit {
  @ViewChild('editForm', {static: true}) editForm: NgForm;
  recipe: Recipe;
  photos: RecipePhoto[];

  constructor(private route: ActivatedRoute, private recipeService: RecipeService, private authService: AuthService,
              private alertify: AlertifyService) { }

  ngOnInit() {
    this.route.data.subscribe(data => {
      this.recipe = data.recipe;
    });
  }



  updateRecipe(id: number) {
    this.recipeService.editRecipe(this.authService.decodedToken.nameid, id, this.recipe).subscribe(next => {
      this.alertify.success('Recipe updated successfully');
      this.editForm.reset(this.recipe);
    }, error => {
      this.alertify.error(error);
    });
  }

  deletePhoto(id: number) {
    this.alertify.confirm('Are you sure you want to delete this photo?', () => {
      this.recipeService.deletePhoto(this.authService.decodedToken.nameid, this.recipe.id, id).subscribe(() => {
        this.photos.splice(this.photos.findIndex(p => p.id === id), 1);
        this.alertify.success('Photo has been deleted');
      }, error => {
        this.alertify.error('Failed to delete the photo');
      });
    });
  }

}

recipe-edit-component.html

  <div class="col-sm-2" *ngFor="let photo of recipe.recipePhotos">
    <img src="{{photo.url}}" class="img-thumbnail p-1" alt="">
    <div class="text-center">
      <button type="button" class="btn btn-sm btn-danger" 
      (click)="deletePhoto(photo.id)" >
      <i class="fa fa-trash-o"></i></button>
    </div>
  </div>

---

尝试将其分为以下两个步骤：

let index = this.photos.findIndex(p => p.id === id);
this.photos = this.photos.splice(index , 1);

---

我假设照片实际上是作为配方的一部分填充的。如果是，请更改：

 this.photos.splice(this.photos.findIndex(p => p.id === id), 1);

到

---

相同的错误：/i当我使用let index时，我得到的消息标识符“index”从未被重新分配；使用“const”而不是“let”。更喜欢使用箭头函数，这应该是什么样子？我是角度方面的初学者。错误是这样说的。照片是未定义的。您在哪里定义/处理照片变量？您需要在组件中初始化变量照片。在我的组件顶部。我刚刚编辑了文章。那么照片数组在哪里填充？包含照片的数组已经部分填充。你能显示代码吗？现在我有错误类型错误：无法读取未定义doops的属性“findIndex”，我已经编辑了。再看看。仔细看一看，看看这条线在做什么，以及为什么会发生错误。提示-this.recipes.photos是一个东西，从api来看this.photos不是。如果您将此问题解决，请将其标记为已回答。谢谢您的帮助！很高兴分类了。

 this.recipe.photos.splice(this.recipe.photos.findIndex(p => p.id === id), 1);