Могу ли я использовать трубу как параметр внутри другого метода в Angular 2+? - PullRequest
Новая
       31

Могу ли я использовать трубу как параметр внутри другого метода в Angular 2+?

0 голосов
/ 27 февраля 2020

В настоящее время я работаю над кодом, написанным кем-то другим, и хочу улучшить его. У меня проблема связана со скоростью приложения. По сути, есть страница, где вы можете добавить некоторые правила, а внутри правил вы можете добавить условия (представьте, что вы пишете запросы для внешнего использования). Тем не мение. В моем шаблоне у меня есть 2 для циклов, первый для правил, а второй внутри первого и для условий, потому что условие l oop нуждается в индексе правил. Таким образом, вы бы что-то вроде: 

<form [formGroup]="parentForm">

  <!-- Rules list. -->
  <div formArrayName="rules" [ngStyle]="{'flex-direction':flexDirection}">
    <mat-accordion class="editRules" multi>
      <mat-expansion-panel class="editRules" expanded hideToggle *ngFor="let ruleControl of
        formRules.controls; let
        ruleId=index" [formGroupName]="ruleId" #rulePanel="matExpansionPanel">

        .......................................................code...........................

        <!-- Conditions. -->
        <div formArrayName="conditions">
          <div *ngFor="let conditionControl of
            formConditions(ruleId).controls; let
            conditionId=index" [formGroupName]="conditionId" #conditionRow>
            <div class="row">
        .......................................................code............................
            </div>
          </div>
        </div>
      </mat-expansion-panel>
    </mat-accordion>
  </div>
</form>

Внутри шаблона есть много методов, которые используют "ruleId" и "conditionId", такие как: 

<input *ngIf="valueAttributeTypeIs(ruleId,conditionId) === 'yearsmonthsdays'" 
        matInput
        [type]="setValueType(ruleId, conditionId)" 
        min="0"
        [placeholder]="valueAttributePlaceHolder(ruleId,conditionId)" 
        [matChipInputFor]="myChipList"
        [matChipInputSeparatorKeyCodes]="separatorKeysCodes" 
        [matChipInputAddOnBlur]="true"
        (matChipInputTokenEnd)="addValuesChips($event,ruleId,conditionId, getValueAttributesType(ruleId, conditionId))"
        [readonly]="maxItemReached(ruleId,conditionId)" />

И такие методы, как 'valueAttributeTypeIs' и 'getValueAttributesType', используются во всем коде и часто запускаются, что, когда у вас более 20 правил, будет действительно загружаться медленный. Поэтому я нашел в сети решение, которое предлагало использовать Pipes, потому что код будет выполняться только тогда, когда Angular обнаружит изменение, но я не знаю, как использовать их внутри шаблона, потому что мои методы используются в условиях, а также в качестве параметров, поэтому не уверен, как это применить. Ребята, у вас есть идеи, как мне справиться с этим?

Два моих метода: 

  // ===========================================================================
  // getValueAttributesType: return the type of the attribute for the datepicker
  // ===========================================================================
  getValueAttributesType(ruleId: number, conditionId: number): string {
    const entity = this.getExistingEntity(ruleId, conditionId);
    const attribute = this.getExistingAttributeList(ruleId, conditionId);
    return this._profileMetadataDefinitionService.getValueAttributesInfo(entity, attribute).type;
  }

  // ===========================================================================
  // valueAttributeTypeIs...
  // ===========================================================================
  valueAttributeTypeIs(ruleId: number, conditionId: number) {

    const type = this.getValueAttributesType(ruleId, conditionId);
    if (this.durationIdList.indexOf(type) >= 0) {
      return 'yearsmonthsdays';
    } else if (this.valueSetIdList.indexOf(type) >= 0) {
      return 'valueset';
    } else if (type === 'boolean' || type === 'duration' || type === 'offsetDateTime') {
      return type;
    } else {
      return 'others';
    }
  }
...