天道酬勤,学无止境

Argument of type ‘Object’ is not assignable to parameter of type ‘string’ - Ionic Angular

Trying to parse with JSON but i get this error: Argument of type 'Object' is not assignable to parameter of type 'string'.

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

@Component({
  selector: 'app-uploader',
  templateUrl: './uploader.page.html',
  styleUrls: ['./uploader.page.scss'],
})
export class UploaderPage implements OnInit {

  imageURL: string
  constructor(public http: HttpClient) { }

  ngOnInit() {
  }

  fileChanged(event) {
    const files = event.target.files
    const data = new FormData()
    data.append('file', files[0])
    data.append('UPLOADCARE_STORE', '1')
    data.append('UPLOADCARE_PUB_KEY', '12d3f0b0b65cb448aa6b')

    this.http.post('https://upload.uploadcare.com/base/', data).subscribe(event => {
      console.log(event)
      this.imageURL = JSON.parse(event).file
    })
  }


}

In the line this.imageURL = JSON.parse(event).file under (event) i get that error. What could be the cause and how to fix it.

The HTML :

<ion-header>
  <ion-toolbar>
    <ion-title>Upload Image</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <div class="camera"> </div>
  <input type="file" (change)="fileChanged($event)"/>

  <img *ngIf="imageURL" src="https://ucarecdn.com/{{ imageURL}}/"/>
</ion-content>

评论

You are close. It appears the response from the POST request is already in JSON format. You don't need the JSON.parse() here. Try the following

this.http.post('https://upload.uploadcare.com/base/', data).subscribe(
  event => {
    this.imageURL = event.file;
  },
  error => { // handle error }
);

It is also good practice to make the actual HTTP request in a service and to handle the error in the subscription.

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 打字稿错误:“对象”类型的参数不可分配给“{}[]”类型的参数(Typescript error: Argument of type 'Object' is not assignable to parameter of type '{}[]')
    问题 我正在使用 Angular Material 表组件,如下所示: this.userService.getUsers().subscribe((response) => { this.users = new MatTableDataSource(response); }); 它可以工作,但在编译时会引发以下打字稿错误: “Object”类型的参数不可分配给“{}[]”类型的参数。 “对象”类型可分配给很少的其他类型。 您的意思是改用“任何”类型吗? “对象”类型中缺少属性“包含”。 所以我尝试将其更改为: this.users = new MatTableDataSource<any>(response); 但还是同样的错误。 response如下所示: [{ userId: 123, username: 'Tom' }, { userId: 456, username: 'Joe' }] 知道如何摆脱错误吗? 编辑 应该提到如果我这样做: this.users = new MatTableDataSource([response]); 错误消失了,但是表格不起作用,因为格式不是表格所期望的正确格式。 只是注意到这一点,以防万一它揭示了可能是什么原因...... 回答1 “Object”类型的参数不可分配给“{}[]”类型的参数。
  • Argument of type 'match' is not assignable to parameter of type any[] - nodejs / mongoose
    My query is running fine in RoboMongo, but when I construct the same in my nodeJs environment I'm getting the exception. Below is my code Repository function public find = async (account: any): Promise<any> => { return PromoTypes.aggregate( { $match: { account: { $in: account } } }, { $group: { _id: '$account', data: { $push: { _id: '$_id', description: '$description', iteration: '$iteration' } } } } ); }; Service file calling the above repo. function AccountService.ts public accountService = async (accountid: string): Promise<any> => { //accounttypes is an array constructed to pass to the
  • “匹配”类型的参数不能分配给 any[] 类型的参数 - nodejs / mongoose(Argument of type 'match' is not assignable to parameter of type any[] - nodejs / mongoose)
    问题 我的查询在 RoboMongo 中运行良好,但是当我在我的 nodeJs 环境中构建相同的查询时,我收到了异常。 下面是我的代码 存储库功能 public find = async (account: any): Promise<any> => { return PromoTypes.aggregate( { $match: { account: { $in: account } } }, { $group: { _id: '$account', data: { $push: { _id: '$_id', description: '$description', iteration: '$iteration' } } } } ); }; 调用上述 repo 的服务文件。 功能 账户服务.ts public accountService = async (accountid: string): Promise<any> => { //accounttypes is an array constructed to pass to the repo, it has more business logic about construction which I have not included in this code. But the object would be as
  • “响应”类型的参数不能分配给“字符串”类型的参数(Argument of type 'Response' is not assignable to parameter of type 'string')
    问题 我有我正在做的这个项目。 这个想法是从谷歌图书 API 检索书籍,使用 angular 4 我正在努力理解如何阅读 JSON 响应,我仍在学习 Angular。 我在互联网上搜索并在 GitHub google bookstore 上找到了这个源代码 我收到以下错误 Argument of type 'Response' is not assignable to parameter of type 'string'. 对于这条线 let bookResponse = JSON.parse(body); 我不确定我是否以正确的方式做这件事。 感谢你的帮助 下面是我发送 HTTP 请求的方法。 getBooks(searchparam: any){ let par = new HttpParams(); par.set('q', searchparam); return this.httpClient.get('https://www.googleapis.com/books/v1/volumes', { params : new HttpParams().set('q',searchparam) }).map( (response: Response) => { let data = response; return data; } ); } 下面是从 HTTP
  • 转换为函数时无法编译代码(unable to compile a code when converted into a function)
    问题 我有以下代码可以正常工作。 public createData(data:Data):Observable<any>{ console.log('contacting server at '+this.API_URL +this.NEW_DATA_URL +" with data "+data+ " with httpOptions "+httpOptions.withCredentials + ","+httpOptions.headers ); let newData = new Data(data) let body = JSON.stringify(newQuestion); //I WANT TO MOVE THE CODE BELOW INTO A FUNCTION BUT AM GETTING COMPILATION ERROR this.loaderService.show(); return this.http.post(this.NEW_QUESTION_URL,body,httpOptions) .pipe(tap(response => { let httpEvent = <HttpEvent<any>>response; if(httpEvent.type === HttpEventType.Response) { console.log(
  • {...} 类型的参数不能分配给 [ ] 类型的参数(Argument of type {...} is not assignable to parameter of type [ ])
    问题 import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams } from 'ionic-angular'; import { EventDetail } from '../../models/event-detail/event-detail.interface'; import { AngularFireDatabase, AngularFireList } from 'angularfire2/database'; @IonicPage() @Component({ selector: 'page-event', templateUrl: 'event.html', }) export class EventPage { eventDetail = {} as EventDetail; eventDetailRef$: AngularFireList<EventDetail[]>; constructor(public navCtrl: NavController, public navParams: NavParams, private database: AngularFireDatabase) { this.eventDetailRef$ = this
  • “X”类型的参数不能分配给“X”类型的参数(Argument of type 'X' is not assignable to parameter of type 'X')
    问题 再会。 我是 Type Script 的新手,使用 VSCode。 得到以下错误: 错误 TS2322:类型 '() => string' 不能分配给类型 'string'。 错误 TS2322:类型 '() => number' 不能分配给类型 'number'。 编码: DTO.ts interface DTO { getId(): number; getValue(): string; } export = DTO; 链接对象.ts class LinkedObject { public value: string = "Not Set"; public id: number = 0; constructor(value?: string, id?: number) { this.value = value; this.id = id; } } export = LinkedObject; 我正在尝试使用上述接口方法实例化LinkedObject类: TravelClientFormPopulator.ts class TravelClientFormPopulator { public populateComboBoxUsingDTOs(dataObjects: Array<DTO>, comboBoxID: string): void { // Get the
  • Argument of type {...} is not assignable to parameter of type [ ]
    import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams } from 'ionic-angular'; import { EventDetail } from '../../models/event-detail/event-detail.interface'; import { AngularFireDatabase, AngularFireList } from 'angularfire2/database'; @IonicPage() @Component({ selector: 'page-event', templateUrl: 'event.html', }) export class EventPage { eventDetail = {} as EventDetail; eventDetailRef$: AngularFireList<EventDetail[]>; constructor(public navCtrl: NavController, public navParams: NavParams, private database: AngularFireDatabase) { this.eventDetailRef$ = this
  • 在 ES6 中自动将参数设置为实例属性(Automatically set arguments as instance properties in ES6)
    问题 如果您使用@ 作为参数的前缀,CoffeeScript 会自动将参数设置为构造函数中的实例属性。 在 ES6 中是否有任何技巧可以完成相同的操作? 回答1 Felix Kling 的评论概述了最接近此问题的整洁解决方案。 它使用两个 ES6 特性——Object.assign 和对象字面量属性值速记。 这是一个以tree和pot作为实例属性的示例: class ChristmasTree { constructor(tree, pot, tinsel, topper) { Object.assign(this, { tree, pot }); this.decorate(tinsel, topper); } decorate(tinsel, topper) { // Make it fabulous! } } 当然,这并不是你真正想要的; 一方面,您仍然需要重复参数名称。 我尝试编写一个可能更接近的辅助方法…… Object.autoAssign = function(fn, args) { // Match language expressions. const COMMENT = /\/\/.*$|\/\*[\s\S]*?\*\//mg; const ARGUMENT = /([^\s,]+)/g; // Extract constructor arguments
  • JavaScript是按引用传递还是按值传递语言?(Is JavaScript a pass-by-reference or pass-by-value language?)
    问题 基本类型(数字,字符串等)按值传递,但是对象是未知的,因为它们都可以按值传递(如果我们认为保存对象的变量实际上是对该对象的引用) )和按引用传递(当我们认为对象的变量包含对象本身时)。 尽管最后并没有什么大不了,但我想知道什么是表达通过约定的参数的正确方法。 是否有JavaScript规范的摘录,该摘录定义了与此相关的语义? 回答1 在JavaScript中这很有趣。 考虑以下示例: function changeStuff(a, b, c) { a = a * 10; b.item = "changed"; c = {item: "changed"}; } var num = 10; var obj1 = {item: "unchanged"}; var obj2 = {item: "unchanged"}; changeStuff(num, obj1, obj2); console.log(num); console.log(obj1.item); console.log(obj2.item); 产生输出: 10 changed unchanged 如果obj1根本不是引用,则更改obj1.item对该函数外部的obj1无效。 如果论点是一个适当的参考,那么一切都会改变。 num为100 ,而obj2.item读为"changed" 。 相反,情况是传入的项目是按值传递的
  • C# 中委托的协方差/不变性/逆变(Covariance/Invariance/Contravariance in delegates in C#)
    问题 我有以下一段代码。 我没有为此委托指定任何通用参数和 IN/OUT(variance)。 如果我正确理解了不变性的含义,我应该无法返回 Base 类型的对象,因为我的委托提到了对象的返回类型。 我对不变性的理解是错误的吗? class Program { public delegate object SampleDelegate(Base b); static void Main(string[] args) { List<Base> listBases = new List<Base>(){new Base{}, new Base{}}; SampleDelegate newDel = new SampleDelegate(ProcessBase); newDel(new Base() { }); Console.ReadLine(); } public static Base ProcessBase(Base b) { return b; } public class Base { } public class Derived : Base { } } 回答1 如果我正确理解了不变性的含义,我应该无法返回 Base 类型的对象,因为我的委托提到了对象的返回类型。 我对不变性的理解是错误的吗? 由于您可以编译并运行该程序,因此您已经知道该问题的答案。 是的。
  • PowerShell:当 .ctor 只有一个 List 类型的参数时,找不到正确的 .ctor [复制](PowerShell: Cannot find proper .ctor when the .ctor has only one argument of type List<T> [duplicate])
    问题 这个问题在这里已经有了答案: 如何为采用单个数组参数的构造函数调用 New-Object? (2 个回答) 3年前关闭。 PowerShell中的 OO 支持似乎存在错误。 当使用接受List<T>且这是唯一参数的构造函数实例化类的对象时,PowerShell 找不到合适的构造函数。 代码示例: class MyClass { MyClass( #[int]$i, [System.Collections.Generic.List[string]] $theparams) { } } $parameters = New-Object System.Collections.Generic.List[string]; $foo = New-Object MyClass -ArgumentList @( #1, $parameters) 未找到构造函数。 找不到适合 MyClass 类型的构造函数。 取消注释[int]参数使其工作正常。 解决方法:由于 Powershell 不处理成员的可见性,如果参数用于分配类成员,那么您可以直接在构造函数之外分配它。 回答1 为避免此处讨论的陷阱,请考虑使用类的静态::new()方法 (PSv5+),如 TheIncorrigible1 的有用答案中所示。 注意:以下内容不仅适用于New-Object ,还适用于所有通过单个参数(通常命名为
  • 为什么在用作函数参数之前需要将子类型分配给变量?(Why do subtypes need to be assigned to a variable before being used as a function argument?)
    问题 我正在学习子类型,并且想知道为什么这里给出的示例 https://www.typescriptlang.org/docs/handbook/type-compatibility.html 可以编译,但是当我将子类型作为参数直接传递给函数时,它不编译。 这是 typescriptlang.org 的原始代码 interface Named { name: string; } let x: Named; // y's inferred type is { name: string; location: string; } let y = { name: "Alice", location: "Seattle" }; function greet(n: Named) { console.log("Hello, " + n.name); } greet(y); // OK 这编译得很好。 但是这个版本,子类型没有分配给 y,失败了。 interface Named { name: string; } let x: Named; function greet(n: Named) { console.log("Hello, " + n.name); } greet({ name: "Alice", location: "Seattle" }); // NOT OK 我得到错误: '{
  • 当用作泛型类型参数时,为什么“动态”对于所有类型都不是协变和逆变的?(Why is “dynamic” not covariant and contravariant with respect to all types when used as a generic type parameter?)
    问题 我想知道当用作泛型类型参数时, dynamic是否在语义上等同于object 。 如果是这样,我很好奇为什么存在这种限制,因为在为变量或形式参数赋值时两者是不同的。 我在 C# 4.0 中编写了一个小实验来梳理一些细节。 我定义了一些简单的接口和实现: interface ICovariance<out T> { T Method(); } interface IContravariance<in T> { void Method(T argument); } class Covariance<T> : ICovariance<T> { public T Method() { return default(T); } } class Contravariance<T> : IContravariance<T> { public void Method(T argument) { } } 有趣的实验细节: class Variance { static void Example() { ICovariance<object> c1 = new Covariance<string>(); IContravariance<string> c2 = new Contravariance<object>(); ICovariance<dynamic> c3 = new
  • 与 lambda 和函数式接口一起使用时理解下界的问题(Problems understanding lower bounds when used with lambda and Functional Interface)
    问题 在学习 Java8 Streams 时,我遇到了以下代码片段: Predicate<? super String> predicate = s -> s.startsWith("g"); 由于泛型参数是下限,我认为这不会编译。 在我看来,如果 Object 是 String 的超类型,则传入 Object 类型应该会破坏它,因为 Object 没有 startsWith() 函数。 但是,我很惊讶地看到它没有任何问题。 此外,当我调整谓词以采用上限时: <? extends String>, 它不会编译。 我以为我理解了上限和下限的含义,但显然,我遗漏了一些东西。 任何人都可以帮助解释为什么下界适用于这个 lambda? 回答1 Lambda 参数类型是准确的,它不能是? super ? super还是? extends ? extends 。 JLS 15.27.3 涵盖了这一点。 Lambda 表达式的类型。 它引入了地面目标类型的概念(基本上是 lambda 类型)。 除其他外,它指出: 如果T是通配符参数化的函数接口类型并且 lambda 表达式是隐式类型的,则基本目标类型是 T 的非通配符参数化(第 9.9 节)。 强调我的。 所以基本上当你写 Predicate<? super String> predicate = s -> s.startsWith("g")
  • Typescript error: Argument of type 'Object' is not assignable to parameter of type '{}[]'
    I'm using the Angular Material table component like so: this.userService.getUsers().subscribe((response) => { this.users = new MatTableDataSource(response); }); It works but when compiling it throws the following typescript error: Argument of type 'Object' is not assignable to parameter of type '{}[]'. The 'Object' type is assignable to very few other types. Did you mean to use the 'any' type instead? Property 'includes' is missing in type 'Object'. So I tried changing it to: this.users = new MatTableDataSource<any>(response); But still same error. response looks like this: [{ userId: 123
  • 参数类型“ void”不能分配给参数类型“ System.Action”(Argument type 'void' is not assignable to parameter type 'System.Action')
    问题 这是我的测试代码: class PassingInActionStatement { static void Main(string[] args) { var dsufac = new DoSomethingUsefulForAChange(); dsufac.Do(WriteToConsole); dsufac.Do2(s => WriteToConsoleWithSomethingExtra("Test")); dsufac.Do(WriteToConsoleWithSomethingExtra("Test")); // Does not compile } internal static void WriteToConsole() { Console.WriteLine("Done"); } internal static void WriteToConsoleWithSomethingExtra(String input) { Console.WriteLine(input); } } internal class DoSomethingUsefulForAChange { internal void Do(Action action) { action(); } internal void Do2(Action<String> action) { action("
  • 带有 ref 对象参数的方法(method with ref object parameter)
    问题 嗨,我必须调用具有此签名的方法: int MethodName(ref object vIndexKey) 如果我尝试用 String c = "690"; MethodName(ref (object) c); 它不起作用。 我能怎么做? 谢谢 回答1 你需要这样做: String c = "690"; object o = (object) c; MethodName(ref o); 原因是参数必须可由函数分配。 该函数可以执行以下操作: o = new List<int>(); 如果基础类型是在方法调用期间已转换为对象的字符串,则这是不可能的,因为赋值的目标仍然是字符串而不是对象。 回答2 当一个方法有一个 ref 参数时,参数类型必须与参数类型完全匹配。 假设MethodName是这样实现的: public void MethodName(ref object x) { x = new object(); } 如果您能够仅使用ref c调用它,您会期望发生什么? 它会尝试将普通System.Object的引用写入System.String类型的变量,从而破坏类型安全。 因此,您需要有一个object类型的变量。 您可以按照 klausbyskov 的回答进行操作,但请注意,该值不会被复制回原始变量。 您可以使用演员表来做到这一点,但请注意它可能会失败: string
  • “{header:Header;}”类型的参数不可分配给“RequestOptionsArgs”类型的参数(Argument of type '{header:Header;}' is not assignable to parameter of type 'RequestOptionsArgs')
    问题 我在尝试在 HTTP.POST/GET 请求中传递标头时出现以下错误Argument of type '{header:Header;}' is not assignable to parameter of type 'RequestOptionsArgs'. Property 'null' is missing in the type '{header:Header;}' Argument of type '{header:Header;}' is not assignable to parameter of type 'RequestOptionsArgs'. Property 'null' is missing in the type '{header:Header;}' 我尝试了很多解决方案,但没有锁定它。 这是我的代码: import { Injectable } from '@angular/core'; import { Response, RequestOptions, Headers, Http, URLSearchParams} from '@angular/http'; import { Observable, Subject } from 'rxjs/Rx'; import {Company} from './companyMaster'
  • 非类型模板参数(Non-type template parameters)
    问题 我知道非类型模板参数应该是一个常数整数表达式。 有人可以解释为什么会这样吗? template <std::string temp> void foo() { // ... } error C2993: 'std::string' : illegal type for non-type template parameter 'temp'. 我知道什么是常数积分表达式。 不允许使用上述代码段中的非常量类型(例如std::string的原因是什么? 回答1 之所以不能执行此操作,是因为在编译期间无法解析和替换非常数表达式。 它们可能会在运行时更改,这将需要在运行时生成新模板,这是不可能的,因为模板是编译时的概念。 这是标准允许非类型模板参数(14.1 [temp.param] p4)的内容: 非类型模板参数应具有以下(可选的,通过cv限定)类型之一: 整数或枚举类型, 指向对象或函数的指针, 对对象的左值引用或对函数的左值引用, 指向成员的指针, std::nullptr_t 。 回答2 那是不允许的。 但是,这是允许的: template <std::string * temp> //pointer to object void f(); template <std::string & temp> //reference to object void g(); 参见C ++