Невозможно программно установить значение в текстовом поле в группе ввода

Question

На моей странице HTML у меня есть группа ввода, используемая для установки значений сумма, сумма и сумма, равная.Я пытаюсь установить сумму от значения программно, когда страница загружается в моем коде angualr.Значение в модели установлено нормально, но оно не отображается на интерфейсе в поле ввода.Что мне нужно сделать, чтобы он там показывал?

Вот мой HTML-код для этой группы ввода:

    <div class="form-group row">
        <div class="col-sm-3" style="max-width: 6%">
                <label class="col-sm-3 text-sm-right col-form-label">&nbsp;&nbsp;&nbsp;Amount</label>
        </div>

        <div class="col-sm-2">
            <div class="row">
                <div class="col-sm-10">
                    <div class="input-group input-group-sm">
                        <span class="input-group-addon">&gt;=</span>
                        <input type="text" name="amount" id="amountFrom" class="form-control form-control-sm" [(ngModel)]="amountFilter.amountFrom">
                    </div>
                </div>
            </div>
        </div>

        <div class="col-sm-2">
            <div class="row">
                <div class="col-sm-10">
                    <div class="input-group input-group-sm">
                        <span class="input-group-addon">&lt;=</span>
                        <input  type="text" name="amount" id="amountTo" class="form-control form-control-sm" [(ngModel)]="amountFilter.amountTo">
                    </div>
                </div>
            </div>
        </div>

        <div class="col-sm-2">
            <div class="row">
                <div class="col-sm-10">
                    <div class="input-group input-group-sm">
                        <span class="input-group-addon">Or=</span>
                        <input  type="text" name="amount" id="amountEqual" class="form-control form-control-sm" [(ngModel)]="amountFilter.amountEqual">
                    </div>
                </div>

Вот мой код в моем угловом компоненте, который вызывается в ngOnInit ():

            this.amountFilter.amountFrom =  50;

Когда страницазагружается и после того, как приведенный выше код вызывается, показанное ниже значение из поля не устанавливается:

Однако фактическое значение модели было установлено, как показанов моем отладчике:

Answer 1

Спасибо всем за помощь. Мне удалось заставить это работать, изменив имена каждого входного текстового поля на amountFrom. сумма к и сумма, равная.

Answer 2

[(ngModel)] считается устаревшим.Лучше всего использовать реактивные формы (https://angular.io/guide/reactive-forms), если вы можете установить значение, используйте метод setValue (value);

Answer 3

Вы получаете какую-либо ошибку. Я создал пример приложения, посмотрите, что вы можете получить представление. Пример приложения

Answer 4

Попробуйте это:

var ele = document.getElementById('amountFrom') as HTMLInputElement
ele.value = '50'