Как программно изменить значение метки ввода с помощью Angular - PullRequest
Новая
       10

Как программно изменить значение метки ввода с помощью Angular

0 голосов
/ 29 ноября 2018

Итак, у меня есть 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>

enter image description here

И в файле .ts у меня есть: 

durationText : "";
pitchfile: any;

И я хочу установить его так: 

durationText = "120";

Но это не позволяет мне делать то, что я должен делать?И как мне установить файл pitchfile программно.

Ответы [ 2 ]

0 голосов
/ 29 ноября 2018

Это очень просто, вам нужно добавить атрибут 'name' к вашему входу следующим образом: 

<input type="text" class="form-control" [(ngModel)]="durationText" id="durationText" name="durationText" placeholder="Song Duration">
0 голосов
/ 29 ноября 2018

ОБНОВЛЕНИЕ 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]);.После загрузки метаданных экземпляр Audio запускает событие loadedmetadata, к которому можно прослушать присвоение функции onloadedmetadata для экземпляра аудио.

Внутри этой функции обратного вызова вы можете проверить наличиеduration property.

Попробуйте: 

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;
    };

  }

  ...

}

Вот Рабочий образец Stackblitz для вашей ссылки.

...