特殊字符编码问题：API GET 请求中忽略的四个参数之一

Question

我有这些发送到 API 的动态值（参数），所以我可以在输入中插入格式化文本（大小和颜色）后获得 PNG 图像：

params = {
    "handwriting_id": "8X3WQ4D800B0",
    "text": "",
    "handwriting_size": "",
    "handwriting_color": "",
  }

前两个是必需的，不是第三个和第四个。我的问题是最后一个参数（颜色）被忽略了，其他参数不太可能：我得到的图像具有我选择的大小和我写的文本，但没有颜色，它总是黑色的。这是相关的 HTML：

<mat-form-field class="block center">
    <mat-select placeholder="Choose Color" [(ngModel)]="selectedColor" [(ngModel)]="params.handwriting_color" (change)="changeColor()">
      <mat-option value="#FF0000" selected="selected">Red

      </mat-option>
      <mat-option value="#8c30ec">Blue
      </mat-option>
      <mat-option value="#ec30db">Violet
      </mat-option>

    </mat-select>
  </mat-form-field>

这是带有调用和那些参数的 URL 自定义字符串：

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

老实说，我不明白；为什么只忽略一个参数？任何帮助将不胜感激

编辑：

正如@Fateh Mohamed 建议的那样，我尝试了这个：

params = {
    "handwriting_id": "8X3WQ4D800B0",
    "text": "",
    "handwriting_size": "",
    "handwriting_color": "",
  }
  color = encodeURIComponent(this.params.handwriting_color);

然后传给网址：

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

但是还是没有结果

Answer 1

请使用：

encodeURIComponent(uri);

对特殊字符进行编码