我有一个 Angular 7 项目，我在一个组件中显示一个图像库，并且我在 assets/images 文件夹中拥有所有图像。每个图像都有自己的删除按钮，而我的 delete() 函数为空，因为我不知道如何从组件中删除图像。
我一直在四处寻找，但我发现的只是人们询问如何访问图像而不是如何删除它们。感谢您的帮助。
编辑：此时我从可视化中删除了图像，但我也想从我本地拥有的文件夹中删除它。
【问题讨论】：
标签： typescript angular7 angular-components
编辑：
您不能使用浏览器中的 JS 从用户计算机或服务器中删除文件。您应该向将为您执行此操作的服务器发送一个 http 请求。
但删除文件很少见，尤其是对于没有用户管理和任何其他后端的应用程序（否则您不会询问如何以角度进行操作）。我认为你应该重新考虑你在做什么。
如果您只想“永远”对用户隐藏图像，您可以使用 localStorage 存储已删除的图像并在每次重新加载时过滤掉图像。
您有多个图像，并且希望它们是动态的，因此您应该将其移动到组件的 JS 端，并使用 html 来显示它。因此，您应该创建一个包含图像的数组，例如：
public images = ['imagePath1', 'imagePath2', 'imagePath3'];
或者，如果您有更多与图像相关的信息，您可以使用对象
public images = [{path: 'imagePath1', description: 'image 1'}, {path: 'imagePath2', description: 'image 2'}];
然后，在 html 中，使用 ngFor 和变量来显示图像：
<div *ngFor="let image of images">
<img [src]="image.path" [alt]="image.description" />
<small>{{image.description}}</small>
</div>
不要忘记添加按钮，你应该将图像的索引传递给它，这样你就会知道要从数组中删除哪个图像：
<div *ngFor="let image of images; let i = index">
<img [src]="image.path" [alt]="image.description" />
<small>{{image.description}}</small>
<button (click)="remove(i)">remove this image</button>
</div>
现在我们可以开始处理删除功能了。返回到您的 JS 代码并添加 index 参数。在函数内部，只需从数组中删除索引，图像就会消失。
public remove(index: number) {
this.images.splice(index, 1);
}
就是这样！
如果你想永久删除图像，那就更复杂了。你应该有一个服务器，并且应该在 remove 时发送一个 http 请求，让它知道你想要删除一个图像，它会处理真正的图像删除。
【讨论】：