angular - 如何在 Angular 中已经有图像的地方更改图像？

Question

编辑语言.component.html

<form method="post" enctype="multipart/form-data">
  <input #fileUpload type="file" (click)="fileUpload.value = null" (change)="importFile($event)" style="display:none" accept="image/*" name="languageimage">
   <div *ngIf="this.editLanguageObj.languageimage">
    <img src="http://localhost:3000/{{this.editLanguageObj.languageimage}}" style="height: 250px;width: 250px;margin-left: 225px;" class="mat-elevation-z8">
   </div>
  <button mat-raised-button class="buttonstyle" color="accent"style="width: 170px;height: 40px;
          margin-left:265px; margin-top:25px;" (click)="fileUpload.click()">
          <mat-icon>image</mat-icon> SELECT FLAG</button>
</form>

编辑语言.component.ts

  import { Component, OnInit,Input } from '@angular/core';
  import { CategoryService } from '../service/category.service';
  import { ActivatedRoute } from '@angular/router';
  import { Language } from '../classes/language';
  import { LanguagesComponent } from '../languages/languages.component';
  import { Http } from '@angular/http';

  @Component({
   selector: 'app-edit-language-details',
   templateUrl: './edit-language-details.component.html',
   styleUrls: ['./edit-language-details.component.css']
  })
 export class EditLanguageDetailsComponent implements OnInit {

    constructor(private categoryService : CategoryService,private route : ActivatedRoute,private http: Http) { }

  @Input() languageObj : Language[];
  editLanguageObj : Language = new Language();
  url = '';
  uploadFiles: File;


  ngOnInit() {
  const id = +this.route.snapshot.paramMap.get('id');
  this.categoryService.editLanguageDetailsById({'id': id}).subscribe(
    (data) => {
      if(data != undefined && data.payload != undefined && data.status == 21) 
      {
         this.editLanguageObj.id = data.payload[0].id;
         this.editLanguageObj.languageimage = data.payload[0].languageimage;
      }
    }
  )
}

  importFile(event : any) {
   if(event.target.files && event.target.files[0]) { 
     var reader = new FileReader();
     reader.onload = (event:any) => {
     this.url = event.target.result;
   }
  reader.readAsDataURL(event.target.files[0]);
   this.uploadFiles = event.target.files[0];
   this.editLanguageObj[0].languageimage = this.uploadFiles;
  }
 }

我从数据库中获取图像（在 ngOnInit 中）现在我想更改此图像并在数据库中更新，但是当我选择图像时它不会更改请帮助我，我是 Angular 的初学者。

标签： angular

Answer 1

尝试将您的图像标签替换为<img src="http://localhost:3000/{{editLanguageObj.languageimage}}" style="height: 250px;width: 250px;margin-left: 225px;" class="mat-elevation-z8">

您的 HTML 格式不正确。

更新的解决方案：

import { Component, OnInit,Input } from '@angular/core';
import { CategoryService } from '../service/category.service';
import { ActivatedRoute } from '@angular/router';
import { Language } from '../classes/language';
import { LanguagesComponent } from '../languages/languages.component';
import { Http } from '@angular/http';

@Component({
  selector: 'app-edit-language-details',
  templateUrl: './edit-language-details.component.html',
  styleUrls: ['./edit-language-details.component.css']
})
export class EditLanguageDetailsComponent implements OnInit {

  constructor(
    private categoryService: CategoryService,
    private route: ActivatedRoute,
    private http: Http) { }

  @Input() languageObj: Language[];
  editLanguageObj = new Language();
  url = '';
  uploadFiles: File;
  languageId: any;
  languageImageUrl: string;


  ngOnInit() {
    const id = this.route.snapshot.paramMap.get('id');

    this.categoryService.editLanguageDetailsById({ 'id': id}).subscribe((data) => {
        if (data !== undefined && data.payload !== undefined && data.status === 21)
        {
          this.languageId = data.payload[0].id;
          this.languageImageUrl = `http://localhost:3000/${data.payload[0].languageimage}`;
        }
      }
    )
  }

  importFile(event : any) {
    if (event.target.files && event.target.files[0]) {
      var reader = new FileReader();
      reader.onload = (event:any) => {
        this.languageImageUrl = event.target.result;
      }
      reader.readAsDataURL(event.target.files[0]);
      this.uploadFiles = event.target.files[0];
     }
  }

<form method="post" enctype="multipart/form-data">
  <input #fileUpload type="file" (click)="fileUpload.value = null" (change)="importFile($event)" style="display:none" accept="image/*" name="languageimage">
   <div *ngIf="languageImageUrl">
    <img src="{{languageImageUrl}}" style="height: 250px;width: 250px;margin-left: 225px;" class="mat-elevation-z8">
   </div>
  <button mat-raised-button class="buttonstyle" color="accent"style="width: 170px;height: 40px;
          margin-left:265px; margin-top:25px;" (click)="fileUpload.click()">
          <mat-icon>image</mat-icon> SELECT FLAG</button>
</form>