时间戳

首页 > 解决方案 > 如何从nodejs以反应形式显示图像角度

angular - 如何从nodejs以反应形式显示图像角度

问题描述

我有一种反应形式，可以从 nodejs 加载输入一个对象。我可以显示每个对象的输入文本，但我不能在表单中显示图像。

  <form autocomplete="off" [formGroup]="forma" (ngSubmit)="onSubmit()">


        <div class="form-group row">
            <!-- <img class="img-list" src="{{ url + 'avatar/' + book.image }}" alt=""> -->

        </div>

        <div class="form-group row">

            <div class="col">

                <input class="form-control" type="hidden" formControlName="_id">

            </div>

        </div>
        <div class="form-group row">
            <!-- *ngIf="book.image && book.image !== ''" -->

            <div class="form-control">
                <!-- formControlName="image"> -->
                <input class="form-control" type="" formControlName="image">
                <img class="img-list" src="{{ url + 'avatar/' + image }}" alt="">
                <!-- <input class="form-control" type="" formControlName="image"> -->

            </div>


        </div>

        <div class="form-group row">
            <label class="col-2 col-form-label">title</label>
            <div class="col">

                <input class="form-control" type="text" formControlName="title" [class.is-invalid]="titleNoValido">
                <small *ngIf="titleNoValido" class="text-danger">
          write the name
        </small>
            </div>

        </div>
        <div class="form-group row">
            <label class="col-2 col-form-label">description</label>
            <div class="col">

                <textarea class="form-control" rows="8" cols="80" formControlName="description" [class.is-invalid]="descripcionNoValido">
               </textarea>

                <small *ngIf="descripcionNoValido" class="text-danger">
          write the name
        </small>
            </div>
        </div>

        <div class="form-group row">
            <label class="col-2 col-form-label">author</label>
            <div class="col">

                <input class="form-control" type="text" formControlName="author" [class.is-invalid]="authorNoValido">
                <small *ngIf="authorNoValido" class="text-danger">
          write the name
        </small>
            </div>
        </div>

        <div class="form-group row">
            <label class="col-2 col-form-label">price</label>
            <div class="col">

                <input class="form-control" type="text" formControlName="price" [class.is-invalid]="priceNoValido">
                <small *ngIf="priceNoValido" class="text-danger">
                Write the phone number
        </small>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-2 col-form-label">stock</label>
            <div class="col">

                <input class="form-control" type="text" formControlName="stock" [class.is-invalid]="stockNoValido">
                <small *ngIf="priceNoValido" class="text-danger">
                Write the phone number
        </small>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-2 col-form-label">Imagen</label>
            <angular-file-uploader [config]="afuConfig" (ApiResponse)="upload($event)">
            </angular-file-uploader>
            <!-- <input class="form-control" type="file" (change)="onChange($event)"> -->

            <a class="btn btn-outline-primary" (click)="save()">save image</a>

        </div>

        <div class="form-group row">
            <label class="col-2 col-form-label">&nbsp;</label>
            <div class="input-group col">
                <button type="submit" class="btn btn-outline-primary btn-block">
        Send
      </button>
            </div>

        </div>
    </form>

如何获取 formcontrolname="image" 中的图像？使用此功能，我将对象加载到表单中

getBook()
{
  this.route.params.subscribe(params =>{
    let id = params['id'];
    this.bookservice.getBook(id).subscribe(
      response =>
      {
        if(!response.book)
        {
          this.router.navigate(['/listbooks']);
        }
        else
        {
          this.book = response.book;
          this.forma.controls['_id'].setValue(response.book._id); 
          this.forma.controls['title'].setValue(response.book.title);
          this.forma.controls['description'].setValue(response.book.description);
          this.forma.controls['author'].setValue(response.book.author);
          this.forma.controls['stock'].setValue(response.book.stock);
          this.forma.controls['price'].setValue(response.book.price);
          this.forma.controls['image'].setValue(response.book.image);

          console.log(this.book);
        }
      }
    )
  });
}

我只在输入中显示一个文本 = src 中带有 .jpg src="{{ url + 'avatar/' + image }}" 的图像名称我无法获取图像。

标签： angularformsimage

解决方案

我已经修复了在 constructor() 中添加 component.ts 的错误this.url = global.url（这会在后端获取 url）

我也在component.html中做过

  <div class="">
        <img class="img-list" src="{{ url + 'avatar/' + imgURL }}" alt="">
    </div>



getBook()
{
  this.route.params.subscribe(params =>{
    let id = params['id'];
    this.bookservice.getBook(id).subscribe(
      response =>
      {
        if(!response.book)
        {
          this.router.navigate(['/listbooks']);
        }
        else
        {
          this.book = response.book;
          this.forma.controls['_id'].setValue(response.book._id); 
          this.forma.controls['title'].setValue(response.book.title);
          this.forma.controls['description'].setValue(response.book.description);
          this.forma.controls['author'].setValue(response.book.author);
          this.forma.controls['stock'].setValue(response.book.stock);
          this.forma.controls['price'].setValue(response.book.price);
          this.forma.controls['image'].setValue(response.book.image);
          this.imgURL = response.book.image; // I get here the name of image
          console.log(this.imgURL);
          console.log(this.book);
        }
      }
    )
  });
}

推荐阅读