时间戳

首页 > 解决方案 > 如何在Angular 10中获取选定值的其他值

arrays - 如何在Angular 10中获取选定值的其他值

问题描述

我有一个数组：

export const Glcode = [
    { id: 1, Type: 'Asset', Name: 'Cash at Head Office', code: '10018' },
    { id: 2, Type: 'Asset', Name: 'POS ACCOUNT ', code: '10432' },
    { id: 3, Type: 'Asset', Name: 'Cash With Bank', code: '10433'},
    { id: 4, Type: 'Custom', Name: 'Cash With Bank ', code: '10436'},
]

我的 HTML 代码有一个选择标签：

<div class="form-group row">
  <label for="gl-code" class="col-sm-2 control-label">GL Name</label>
  <div class="col-sm-3">
    <input type="text" style="margin-left: 25px;" placeholder="Enter the GL name" class="form-control"
           data-min-length="1"
           name="journal.glname" [(ngModel)]="journal.glname" (input)="filterNumber()" list="glcode"
           data-relatives='#chained_relative' data-chained-relatives='true' (change)="selectGL($event.value)">

    <datalist id="glcode">
      <option *ngFor="let i of glcode" [value]="i.Name">{{i.Name}}</option>
    </datalist>
  </div>

  <label for="gl-code" class="col-sm-2 control-label">GL Type:</label>
  <div class="col-sm-4 form-group">
    <div
      list="glcode">
    </div>
  </div>
</div>

<div class="form-group">
  <label style="margin-left: -13px;" for="gl-name" class="col-sm-2 control-label">GL Number:</label>
  <div class="col-sm-10">
    <div id="glname" name="glname"></div>
  </div>
</div>

<label for="gl-code" class="col-sm-2 control-label">GL Type:</label>
<div class="col-sm-4 form-group">
  <div
    list="glcode">
  </div>
</div>
</div>

<div class="form-group">
  <label style="margin-left: -13px;" for="gl-name" class="col-sm-2 control-label">GL Number:</label>
  <div class="col-sm-10">
    <div id="glname" name="glname"></div>
  </div>
</div>

还有我的 TypeScript 代码：

glcode = Glcode
btnDisabled = false;

selectGL(data){
  console.log(this.glcode[data].code) 
}

我想自动设置，如果我选择一个glcode.Name，对应的glcode.Type和glcode.code会自动显示。例如，如果我在下拉列表/选择选项中选择“POS ACCOUNT”，10432将Asset分别显示在 GL 编号和 GL 类型标签下，谢谢

标签： arraysangularfor-loophtml-selectkey-value

解决方案

您在问题中提到了一个下拉列表，但您发布的 HTML 中没有一个下拉列表？

但是，如果您希望在从下拉列表中选择项目时自动填充字段，您可以使用 *ngFor 循环遍历下拉列表中的项目，然后使用 ngModel 将下拉列表中的选定项目绑定到变量（我将称为 selectedItem），然后您将字段设置为链接到 selectedItem 的字段，例如：

 <label for="gl-code" class="col-sm-2 control-label">GL Type:</label>
            <div class="col-sm-4 form-group">
                <div 
               list="glcode" > {{selectedItem.glCode}}
            </div>

您必须进行空检查以确保没有任何问题，但这应该对您有所帮助。

推荐阅读