如何使用API访问后端的角形前端图像

Question

我有一个棱角的前端，我想有访问图像在我的后端。因此,我创建了经过安全验证的webservices；

//AppParam{int id, AppFileInfo logo}
@GetMapping(value = "/allParam")
    public List<AppParam> getAllParams (){
        return paramsSiteService.findAllParam();
    }

// model 
export class ParamSite {
    public id: string;
    public file;
    constructor(file) {
      this.file = file;
    }
  }

//service
@Injectable({
  providedIn: 'root'
})
export class ParamSiteService {
  host: string;
  headers;

  constructor(private http: HttpClient, private authService: AuthentificationService, private appConfigService: AppConfigService) {
    this.headers = new HttpHeaders({'authorization': this.authService.jwt});
    this.host = this.appConfigService.getMyUrl();
  }
...
getAllParam(): Observable<any> {
    console.log(this.host);
    console.log(this.headers);
    console.log(this.authService.jwt);
    return this.http.get(this.host + "/allParam", {headers: this.headers})
    .pipe(catchError((error: any) => {
      console.log(error); 
      return Observable.throw(error);}
      ));;
  }

//html
<img  src={{logo.file}} alt="" width="50">

// ts
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  showFiller: boolean;
  logo ;

  constructor(private authService: AuthentificationService, private router: Router,
     private frontDynamic: FrontDynamicService,private cdRef:ChangeDetectorRef
     ,private paramSiteService: ParamSiteService) {
  }

 ngOnInit(): void {
    this.authService.loadToken();
    this.getLogo();
  }
  ngAfterViewChecked(){
    this.cdRef.detectChanges();
  }
  ngOnDestroy(): void {
    this.onLogOut()
  };
  onLogOut() {
    return this.authService.logout()
  }
 public getLogo(){
    this.paramSiteService.getAllParam().pipe(take(1)).subscribe(param => {
      this.logo = param;
      console.log(param);
    },
    error => console.log(error)
  );
  }
...
}

core.js:4081错误类型错误：无法读取未定义的属性“file”

console.log“GetAllParam（）

param-site.service.ts:35 http://localhost:8082

Answer 1

我通过允许所有人使用webservice解决了这个问题。

这不是最好的解决方案，但主要组件，我应该把登录作为主要组件。