Question

在我的HTML页面中，我有一个输入组，用于设置值from，amount to和amount equal。当页面在我的angualr代码中加载时，我试图通过编程方式从值中设置金额。模型中的值设置很好，但不会在输入框中的UI上显示。我需要怎么做才能显示在那里？

这是此输入组的HTML：

Mockito.when(backendHotelService.name()).thenReturn("test);

这是我在AngOn组件ngOnInit（）中调用的代码：

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

页面加载时，在上面的代码被调用后，如下所示，未设置from字段的数量：

但是实际的模型值已按照我的调试器中所示设置：

Answer 1

尝试一下：

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

Answer 2

[（ngModel）]被认为已弃用。最佳做法是使用反应形式（Implicit Objects）使用它可以设置值使用方法setValue（value）;

Answer 3

您遇到任何错误吗？我创建了一个示例应用程序，看一下您可能会有所想法。 Sample app

Answer 4

谢谢大家的帮助。我已通过将每个输入文本框的名称更改为amountFrom，来使其工作。 amountTo和amountEqual等于。

无法以编程方式在输入组的文本框中设置值

4 个答案: