Question

我正在尝试根据下拉更改事件更新输入控件的值。我不知道如何更新输入控件中的值，因为html和组件在父级和子级别。我试图编写方法来检索值但不知道在哪里过滤值并更新输入控件

父组件具有名为fedExciseExpensesInputs的属性。这将从数据库中检索该输入控件的所有值。

export interface FedExciseExpense  {

        coveragePolicyTypeId: number;
        is953D: number;
        value?: number;
    }

  get fedExciseExpensesInputs(): Array<BackendDto.FedExciseExpense> {
    return  this.editableLob.fedExciseExpenses.map(x => {
      return x;
    });
  }

更改事件如下

 coveragePolicyTypeChanged($event) {
    this.updateCedingComission(this.showCededComission && this.editableLob.isCededCommision);

    this._refProxy.getDefaultLineOfBusinessInputForClient(this.domicileId, this.industryId,this.selectedLineOfBusiness.id)
      .uiSignal('lineofbusinessDefault').subscribe(ret => {
          this.lob.fedExciseExpenses = ret.data.fedExciseExpenses;
    });
  }

在父组件html中，我传递子组件选择器中的值。您还会注意到在html中调用的coveragePolicyTypeChanged

例如，您可以在下面看到

[（fedExciseExpensesInputs）] =“fedExciseExpensesInputs”

<incremental-captive-expenses [show]="show" *ngIf="incrementalExpensesInputs" [(incrementalExpensesInputs)]="incrementalExpensesInputs"
      [(fedExciseExpensesInputs)]="fedExciseExpensesInputs"  [currentSelectedCurrency]="currentSelectedCurrency" (isValid)="incrementalExpensesValid($event)">
</incremental-captive-expenses>


 <div class="col-lg-3 col-6 mb-3 highlighted">
        <label class="col-form-label">{{'CAPTIVES.LINES.POLICYTYPE.COVERAGETYPE.TITLE'|translate}}</label>
        <div class="only-ie">
          <select class="select-wrapper" [(ngModel)]="editableLob.coveragePolicyTypeId" (change)="coveragePolicyTypeChanged($event)"
            name="policyType" required tooltip="{{'CAPTIVES.LINES.POLICYTYPE.COVERAGETYPE.TITLETOOLTIP'|uppercase|translate}}"
            placement="bottom">
            <option disabled="disabled" [ngValue]="defaultPolicyType">{{'CAPTIVES.LINES.POLICYTYPE.COVERAGETYPE.SELECT'|translate}}</option>
            <option class="theme--option--default" *ngFor="let policyType of policyTypes" [ngValue]="policyType.id">{{'CAPTIVES.LINES.POLICYTYPE.COVERAGETYPE.'+policyType.name|uppercase|translate}}</option>
          </select>
        </div>

子组件定义了一个属性，它读取输入值，如下所示。我需要根据用户选择的内容将1的赋值更改为动态。

export class IncrementalCaptiveAssumptionsComponent extends Base.DynamicFormComponent implements OnInit, OnChanges {
  @Input() incrementalExpensesInputs: Array<BackendDto.IncrementalExpense>;
  @Input() fedExciseExpensesInputs: Array<BackendDto.FedExciseExpense>;

    get fedExTax(): BackendDto.FedExciseExpense {
          return this.fedExciseExpensesInputs.find(x=> x.coveragePolicyTypeId == 1);
      }
}

父组件的html如下

  <div class="col-lg-3 col-6 mb-3">         
  <label class="col-form-label">{{'CAPTIVES.LINES.INCCAPTIVEEXPENSE.' + FedExciseKey|uppercase|translate}}</label>
    <div class="input-group">
        <input type="text" class="form-control form-control-sm"  [(ngModel)]="fedExTax.value"
        [ngModelOptions]="{standalone: true}"
          name="{{FedExciseKey}}"
           numberFormat="numberPercent:.0-2"
          (ngModelChange)="change()"
          [required]="true"
          tooltip="{{'CAPTIVES.LINES.INCCAPTIVEEXPENSE.' + FedExciseKey + 'TOOLTIP'|uppercase|translate}}" placement="bottom">
        <span class="input-group-addon">%</span>
      </div>

Answer 1

首选使用

向儿童提供输入数据

<child-component [fedExciseExpensesInputs]="fedExciseExpensesInputs"]></child-component>

关于子使用输出功能的下拉更改功能：

<child-component (onChangeOutputFunctionInChild)="onChangeFunctionInParent></child-component>

所以请使用它：

<child-component [fedExciseExpensesInputs]="fedExciseExpensesInputs"] (onChildChange)="onChangeFunctionInParent></child-component>

在儿童成分中使用： @Output（）onChildChange = new EventEmitter（）;

onDropDownChange(){
this.onChildChange.emit(yourData);
}

在父ts中获取onChangeFunctionInParent（value）函数中的数据。

输入控件需要根据角度4中的下拉选择反映更改

1 个答案: