typescript 如何简化基于事件目标名称的ngIf方法？

我有一个复选框，每个复选框都有一个name属性。如何简化基于www.example.com创建的ngIfevent.target.name?

<input [checked]="financeValue" (click)="saveSetting($event)" id="finance" aria-describedby="finance-description" name="finance" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
<input [checked]="accountValue" (click)="saveSetting($event)" id="account" aria-describedby="account-description" name="account" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
<input [checked]="technoValue" (click)="saveSetting($event)" id="techno" aria-describedby="techno-description" name="techno" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
<input [checked]="marketingValue" (click)="saveSetting($event)" id="marketing" aria-describedby="marketing-description" name="marketing" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
<input [checked]="salesValue" (click)="saveSetting($event)" id="sales" aria-describedby="sales-description" name="sales" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
<input [checked]="logisticValue" (click)="saveSetting($event)" id="logistic" aria-describedby="logistic-description" name="logistic" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
<input [checked]="callValue" (click)="saveSetting($event)" id="call" aria-describedby="call-description" name="call" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">

financeValue: any;
accountValue: any;
technoValue: any;
marketingValue: any;
salesValue: any;
logisticValue: any;
callValue: any;

ngOnInit(): void {
  const getSession = sessionStorage.getItem('setting');

  if (getSession) {
    const parseSession = JSON.parse(getSession);
    parseSession.forEach((item, index) => {
      if(parseSession[index].setName === 'finance') {
        this.financeValue = item.setValue;
      } else if(parseSession[index].setName === 'account') {
        this.accountValue = item.setValue;
      } else if(parseSession[index].setName === 'techno') {
        this.technoValue = item.setValue;
      } else if(parseSession[index].setName === 'marketing') {
        this.marketingValue = item.setValue;
      } else if(parseSession[index].setName === 'sales') {
        this.salesValue = item.setValue;
      } else if(parseSession[index].setName === 'logistic') {
        this.logisticValue = item.setValue;
      } else if(parseSession[index].setName === 'call') {
        this.callValue = item.setValue;
      }
    });
  }
}

基于www.example.com简化ngIfevent.target.name

NgModel在这里会很有帮助。

- 代码**

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  test = [{value: false, name: "Test"}, {value: false, name: "Test2"}, {value: false, name: "Test3"}]

  log() { console.log(this.test); }
}

- 超文本标记语言**

<div *ngFor="let booleanOption of test; let i = index">
    <label [attr.for]="booleanOption">Option {{ booleanOption.name }}</label>
    <input type="checkbox" [attr.id]="booleanOption" [(ngModel)]="test[i].value" (change)="log()" />
</div>

测试是一个"设置"数组。在您的情况下：

const settings = [
  {
    name: "financeValue",
    value: false
  }
.....
]

然后使用*ngFor（可选）自动构建inputs。每次更改都将被设置到"settings"数组中。这是双向绑定的（通过输入更改代码 * 或 * html都可以）。
inputshtml中的**log（）**方法只是记录数组，你不需要它。

typescript 如何简化基于事件目标名称的ngIf方法？

1条答案

相关问题

热门标签

最新问答