angular - 在 devextreme 表单上使用时引用变量未定义

Question

在 devextreme 表单上，您将看到添加的引用变量“#email”、“#twitter”和“#phone”。我试图将每个输入的值传递给一个函数，但这些都返回一个未定义的对象。

    <div class="jumbotron">

    <h1>:(</h1>
    <h2>
    Sorry, this feature is not yet implemented. Please subscribe and we will let you know when the feature is complete.
    </h2>
</div>

<div>
    <dx-form [colCount]="1"
             labelLocation="left">
        <dxi-item #email dataField="Email Address"></dxi-item>
        <dxi-item #twitter dataField="Twitter"></dxi-item>
        <dxi-item #phone dataField="Phone Number"></dxi-item>

    </dx-form>        

    <div class="buttonContainer">
        <dx-button text="Subscribe"
                   type="success"
                   icon="check"
                   (click)="onSubscribe(email.value, twitter.value, phone.value)">
        </dx-button>
    </div>

</div>

如果我使用常规输入元素，则这些值确实按预期传递给函数：

<input #email placeholder="email">
<input #twitter placeholder="twitter">
<input #phone placeholder="phone number">

该函数只是返回一个控制台消息：

onSubscribe(emailAddress: string, twitterHandle: string, phoneNumber: string) {    
    console.log(emailAddress, twitterHandle, phoneNumber);      
}

如何使用这些变量引用将输入值传递给函数？

Answer 1

dxi-item没有value财产。您可以定义一个包含编辑器的模板，其参考如下：

<dxi-item>
    <dxo-label text="e-mail"></dxo-label>
    <dx-text-box #email [(value)]="data.email"></dx-text-box>
</dxi-item>
...
{{email.value}}