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

Question

我有一个数组：

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将分别显示在总账编号和总账类型标签下感谢

Answer 1

你在问题中提到了一个下拉列表，但你发布的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>

您必须放入null检查以确保没有任何中断，但这应该会对您有所帮助。