Angular 带有对象的URL连接返回错误的请求（第4步）

我必须向这个API发送动态数据，它只有两个必需的参数：id和text。我有一个对象，该对象的这些键绑定到视图中的输入，并且id已进行了harcoded，但是当我提交时，我得到了400状态码：

观点：

<form novalidate #f="ngForm" (submit)="onSubmit(f);"  >
  <mat-form-field>
    <textarea  matInput placeholder="Text" 
    id="output-text"
    name="text" 
    [(ngModel)]="params.text"
    #userName="ngModel"
    placeholder="text"
    minlength="2"
    required>
    </textarea>
  </mat-form-field>

  <button type="submit" value="Submit" class="block" (click)="onSubmit(f)" mat-raised-button>Submit</button>

</form>

---

我得了200分。我错过了一些东西；为什么API不接受动态值？任何帮助都将是非常宝贵的

您正在将

此参数添加到字符串中，您需要在选项对象中设置该参数：

this.http.get<Response>('https://api.handwriting.io/render/png', {
    params: new HttpParams().set('handwriting_id', params.handwriting_id).set('text', params.text),
    headers: new HttpHeaders().set('Authorization', 'Basic ' + btoa('STRSKVENJVBD0JDS:4ZN6VD256FEBHSM1'))
}).subscribe(data => {...});

this.http.get（'https://api.handwriting.io/render/png', {
params:new-HttpParams（）.set（'writive_id'，params.writive_id.）.set（'text'，params.text），
headers:new-HttpHeaders（）.set（'Authorization'，'Basic'+btoa（'STRSKVENJVBD0JDS:4ZN6VD256FEBHSM1'））
}).subscribe（数据=>{…}）；

或者，您可以手动构建所需的URL：

const url = `https://api.handwriting.io/render/png?handwriting_id=${params.handwriting_id}&text=${params.text}`;

this.http.get<Response>(url, {
    headers: new HttpHeaders().set('Authorization', 'Basic ' + btoa('STRSKVENJVBD0JDS:4ZN6VD256FEBHSM1'))
}).subscribe(data => {...});

const url=`https://api.handwriting.io/render/png?handwriting_id=${params.scription_id}&text=${params.text}`；
this.http.get（url{
headers:new-HttpHeaders（）.set（'Authorization'，'Basic'+btoa（'STRSKVENJVBD0JDS:4ZN6VD256FEBHSM1'））
}).subscribe（数据=>{…}）；

您的方法的问题是，在JS中，当您尝试将对象附加到字符串时，它将转换为
“[object object]”
，因此您向此URL发出请求：

”https://api.handwriting.io/render/png?[object object]“
谢谢您的回答@Martin Adámek，但我得到了
这个.params的下划线。Intellisense说，这种类型（params）与类型参数没有共同的特性：CodecTry it now，
HttpParams
的API与我想象的不同。它应该是
newhttpheaders（）。set（key，value）
谢谢@Martin Adámek，它与“手动url”一起工作。干杯
this.http.get<Response>('https://api.handwriting.io/render/png', {
    params: new HttpParams().set('handwriting_id', params.handwriting_id).set('text', params.text),
    headers: new HttpHeaders().set('Authorization', 'Basic ' + btoa('STRSKVENJVBD0JDS:4ZN6VD256FEBHSM1'))
}).subscribe(data => {...});

const url = `https://api.handwriting.io/render/png?handwriting_id=${params.handwriting_id}&text=${params.text}`;

this.http.get<Response>(url, {
    headers: new HttpHeaders().set('Authorization', 'Basic ' + btoa('STRSKVENJVBD0JDS:4ZN6VD256FEBHSM1'))
}).subscribe(data => {...});