Question

基本上有一个简单的表单，带有输入和按钮。按下按钮会将输入的当前值复制到标签：

点击后：

html：

import QtQuick 2.10
import QtQuick.Window 2.10
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3

ApplicationWindow {
    id: root
    visible: true
    width: 400
    height: 200

    property string color: "red"
    onColorChanged: {
        canvas.requestPaint()
    }

    ColumnLayout
    {
        anchors.fill: parent
        anchors.margins: 20
        spacing: 20
        RowLayout
        {
            Layout.alignment: Qt.AlignHCenter
            Repeater
            {
                model: ["red", "blue", "yellow"]
                Button
                {
                    text: modelData
                    highlighted: root.color == modelData
                    onClicked: {
                        root.color = modelData
                    }
                }
            }
            CheckBox
            {
                id: clearBeforeRepaintCb
                text: "Clear before paint"
            }
        }

        Canvas
        {
            id: canvas
            Layout.fillHeight: true
            Layout.fillWidth: true
            onPaint: {
                var ctx = getContext("2d")
                if(clearBeforeRepaintCb.checked)
                    ctx.clearRect(0, 0, canvas.width, canvas.height)
                ctx.strokeStyle = root.color
                ctx.lineWidth = 10
                ctx.beginPath()
                ctx.moveTo(10, height/2)
                ctx.lineTo(width-10, height/2+3)
                ctx.stroke()
            }
        }
    }
}

JS：

<input id="inputID" [(ngModel)]="inputValue" />
<button id="buttonID" (click)="set()">send</button>
<hr/>
<label> new Value: {{labelValue}} </label>
<hr/>

我必须仅使用本地JS代码来模拟用户交互。 因此，我尝试以下操作（例如在浏览器控制台中）：

  labelValue = "";
  inputValue = "defaultValue";

  set(){
    this.labelValue = JSON.parse(JSON.stringify(this.inputValue));
  }

问题是这样的：

我在标签中得到了默认值，而不是当前值。如何获得正确的价值？我怀疑是reflected properties周围的东西，但是无法弄清楚这里可能是什么问题。

更新：我尝试了以下方法，也没有运气。

 - document.getElementById('inputID').value = "aNewValue"; 
 - document.getElementById('buttonID').click();

Answer 1

Angular在input事件中更新模型。设置该值后，应手动触发它。

inputElement = document.getElementById('inputID');
buttonElement = document.getElementById('buttonID');

inputElement.value = "aNewValue";
inputElement.dispatchEvent(new Event('input', {
  view: window,
  bubbles: true,
  cancelable: true
}))
buttonElement.click();

如何在输入和按钮元素上模拟用户交互？

1 个答案: