如何在不刷新页面的情况下立即基于字段选择显示数据？

Question

在选中复选框后，我将动态获取电子邮件地址，如图中所示。这些电子邮件将存储在“ mailRecipients”中。因此，我想做的是，一旦我结束选择两个复选框，就应该从服务响应中获得收件人字段中的电子邮件地址。 [TS]组件：

      this.adminService.admincomposeEmail(finalEmailObj).subscribe((data: any) => {
            $('.customLoader').hide();
            var res = data.response;
            this.mailRecipients = data.data;
            console.log(this.mailRecipients)
            if (data.status) {
                Swal('Success!', res.msg, 'success');
                // this.router.navigate(['/admin/messaging']);
            } else {
                Swal('Oops...', res.msg, 'error');
            }
        });

[HTML]这是我的收件人字段

<div class="c-field u-mb-small">
  <label class="c-field__label" for="subject">Recipients</label>
  <input 
    class="c-input" 
    type="text" 
    name="mailRecipients" 
    [(ngModel)]="mailRecipients" 
    placeholder="Subject">
</div>

检查此图像。在这里，一旦我选择了用户类型和国家，我如何立即显示电子邮件地址？

Answer 1

您的问题尚不清楚，但是这里的想法是，您可以创建一个数组，在选中复选框时将'Name'推送到复选框更改事件中，然后加入该数组并将其分配给模型 像这样

model: any;
arr: Array<string> = new Array<string>();

复选框的更改事件

<input type="checkbox" (change)="change($event, 'Vendor')">

change(event, name) {
    if ($(event.currentTarget).is(":checked")) {
    this.arr.push(name);
  }
else{
    let index = this.arr.indexOf(name);
    this.arr.splice(index, 1);
  }
    this.model = this.arr.join(', ');
}

和您的文本框

<input type="textbox" [(ngModel)]="model" />

对于全选，您已经将数据存储到“ mailRecipients”中，添加了对全选的检查，并创建了逗号分隔的字符串并将其传递给模型。