angular - 角度如何在编辑模式下上传图像并将图像检索为字符串？

问题描述

我正在学习使用 Angular 和 asp.net 核心在此链接上使用这些视频构建应用程序- 单元表格，课程 - Felipe Gavilan 的“从计算机中选择图像” - 在 VSCode 上。除了用图像编辑 aa 组件外，一切正常。本教程创建了两个接口（两个模型） - 一个用于以字符串形式检索图像，另一个用于通过上传创建图像。当我运行应用程序时，我收到如下错误，但相同的代码在教程中有效，我不知道为什么

类型“actorDTO”不可分配给类型“actorCreationDTO”属性“图片”的类型不兼容。类型“字符串”不可分配给类型“文件”。<app-form-actor [model]="model" (onSaveChanges)="saveChanges($event)"> src/app/actors/edit-actor/edit-actor.component.ts:7:24 templateUrl: '. /edit-actor.component.html', 组件EditActorComponent的模板出错。

下一行中的错误是由于两个模型接口（1）actorCreationDTO 具有文件类型的“图片”（用于创建和上传图像）和（2）actorDTO 具有字符串类型的“图片”（用于检索编辑模式）

<app-form-actor [model]="model" (onSaveChanges)="saveChanges($event)">

演员.model.ts

            export interface actorCreationDTO{
        name:string;
        dateOfBirth:Date;
        picture:File;
        biography?:string;
        }

        export interface actorDTO{
            name:string;
            dateOfBirth:Date;
            picture:string;
            biography?:string;

            }

form-actor.component.html

            <form (submit)="saveChanges()" [formGroup]="form">
            <mat-form-field appearance="outline">
                <mat-label>Name*</mat-label>
                <input formControlName="name" matInput>
                <mat-error>The name is required</mat-error>
            </mat-form-field>
            <mat-form-field appearance="outline">
                <mat-label>Date Of Birth</mat-label>
                <input formControlName="dateOfBirth" matInput [matDatepicker]="picker">
                <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                <mat-datepicker #picker></mat-datepicker>
            </mat-form-field>
            <h4>Select Picture</h4>
            <app-input-img 
        [urlCurrentImage]="model?.picture"  (onImageSelected)="onImageSelected($event)"></app-input-img>
        
        <!-- <app-input-img 
            (onImageSelected)="onImageSelected($event)"></app-input-img>
            -->
            <h4>Biography</h4>
            <app-input-markdown [markdownContent]="model?.biography" (changeMarkdown)="changeMarkdown($event)"></app-input-markdown>

        <div><button mat-flat-button color="primary" [disabled]="form.invalid">Save Changes</button>
        <a mat-stroked-button routerLink="/actors" >Cancel</a>
        </div>
        </form>

form-actor.component.ts

      import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
  import { FormBuilder, FormGroup, Validators } from '@angular/forms';
  import { actorCreationDTO } from '../actors.model';

  @Component({
    selector: 'app-form-actor',
    templateUrl: './form-actor.component.html',
    styleUrls: ['./form-actor.component.css']
  })
  export class FormActorComponent implements OnInit {

    constructor(private formBuilder:FormBuilder) { }
    form!:FormGroup;
  @Input()
  model!:actorCreationDTO;
    @Output()
    onSaveChanges=new EventEmitter<actorCreationDTO>();
    ngOnInit(): void {
      this.form=this.formBuilder.group({
        name: ['',{
          validators:[Validators.required]
        }],
        dateOfBirth:'',
        picture:'',
        biography:''
      });
      if(this.form!==undefined)
      {
        this.form.patchValue(this.model);
      }
    }
    onImageSelected(image: any){
      this.form.get('picture')?.setValue(image);
    }
    changeMarkdown(content: any){
      this.form.get('biography')?.setValue(content);
    }
    saveChanges(){
      this.onSaveChanges.emit(this.form.value);
    }
  }

创建actor.component.html

            <h2>Create Actor</h2>
        <app-form-actor (onSaveChanges)="saveChanges($event)"></app-form-actor>

创建actor.component.ts

        import { Component, OnInit } from '@angular/core';
    import { actorCreationDTO } from '../actors.model';

    @Component({
      selector: 'app-create-actor',
      templateUrl: './create-actor.component.html',
      styleUrls: ['./create-actor.component.css']
    })
    export class CreateActorComponent implements OnInit {

      constructor() { }

      ngOnInit(): void {
      }
      saveChanges(actorCreationDTO:actorCreationDTO){
        console.log(actorCreationDTO);

      }
    }

编辑actor.component.html

        <h2>Edit Actor</h2>
    <app-form-actor [model]="model" (onSaveChanges)="saveChanges($event)"></app-form-actor>

编辑actor.component.ts

        import { Component, OnInit } from '@angular/core';
    import { ActivatedRoute, Router } from '@angular/router';
    import { actorCreationDTO, actorDTO } from '../actors.model';

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

      constructor(private activatedRoute:ActivatedRoute) { }

    model:actorDTO ={name: 'Tom Holland',dateOfBirth: new Date(), 
    picture:'https://www.nme.com/wp-content/uploads/2021/01/Chris-Evans-Captain-America-696x442.jpg',
    biography:'default value'
            }
      ngOnInit(): void {
        // this.router.navigate(['edit',id], { relativeTo: this.route });

        this.activatedRoute.params.subscribe(params=>
          {
          // alert(params.id);
          });
      }

   
    saveChanges(actorCreationDTO:actorCreationDTO){
      console.log(actorCreationDTO);

    }

    }

index-actors.component.html

            <h2>Actors</h2>
        <button mat-flat-button color="primary" type="button" routerLink="/actors/create">Create New</button>

索引-actors.component.ts

      import { Component, OnInit } from '@angular/core';

  @Component({
    selector: 'app-index-actors',
    templateUrl: './index-actors.component.html',
    styleUrls: ['./index-actors.component.css']
  })
  export class IndexActorsComponent implements OnInit {

    constructor() { }

    ngOnInit(): void {
    }

  }

标签： angulartypescriptasp.net-core.net-coreangular-material

angular - 角度如何在编辑模式下上传图像并将图像检索为字符串？

问题描述

解决方案

推荐阅读