如何使用Angular以编程方式更改输入标签值

Question

因此，我可以在UI中填充2个字段，并且可以正常工作，但是如何以编程方式填充UI。

<div class="form-group">
  <label for="durationText">Song Duration (ms)</label>
  <input type="text" class="form-control" [(ngModel)]="durationText" id="durationText" placeholder="Song Duration">
</div>

<div class="form-group">
    <label for="pitchfile">Pitches file (.txt)</label>
    <input type="file" class="form-control-file" id="pitchfile" accept=".txt" (change)="setPitchfile($event)">
</div>

在.ts文件中，我有：

durationText : "";
pitchfile: any;

我想将其设置为：

durationText = "120";

但是它不允许我这样做，我该怎么办？ 以及如何通过编程方式设置文件pitchfile。

Answer 1

更新1：

您的代码有问题。

durationText : "";
pitchfile: any;

应该是：

durationText : string;
pitchfile: any;

---

更新2：

如果这是您正在接受的文本文件，并且用户通过input类型的文件选择了该文件，则可以使用以下命令读取文件的内容：

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

@Component({...})
export class AppComponent {
  durationText;

  setPitchfile($event) {...}

  readFromTextFile($event) {
    const file = $event.target.files[0];
    var reader = new FileReader();
    reader.onload = function () {
      console.log(reader.result);
    };
    reader.readAsText(file);
  }

  ...

}

样本StackBlitz会相应更新。

---

原始答案：

不太确定如何从文本文件中获取持续时间。

但是，如果您有实际的音频文件，则可以执行以下操作：

您可以创建一个new Audio()实例，然后使用src设置它的URL.createObjectURL($event.target.files[0]);属性。加载元数据后，音频实例将触发一个loadedmetadata事件，您可以听一听，将功能分配给音频实例上的onloadedmetadata。

在此回调函数中，您可以检查duration属性。

尝试一下：

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

@Component({...})
export class AppComponent {
  durationText = '';

  setPitchfile($event) {
    console.log($event.target.files);

    const audio = new Audio();
    audio.src = URL.createObjectURL($event.target.files[0]);
    audio.onloadedmetadata = () => {
      console.log(audio.duration);
      this.durationText = audio.duration;
    };

  }

  ...

}

---

这是您推荐的Working Sample Stackblitz。

Answer 2

这非常简单，您需要像这样在输入中添加“名称”属性：

<input type="text" class="form-control" [(ngModel)]="durationText" id="durationText" name="durationText" placeholder="Song Duration">