Question

我正在尝试找出一种更好的方法，而不保存用于跟踪目的的属性和值。这是我第一次使用angular6。想知道我们是否可以传递绑定值。有任何想法吗？

public $searchTerms = this.globeGetter.getSearchTermStream().pipe(map(response => {
        return response.map(term => {
            if(term.length > 25) {
                const trimmedSearchTerm = term.substring(0,25) + '...';
                return {
                    value: term,
                    trimmedValue: trimmedSearchTerm,
                    icon: 'search',
                    removable: true,
                };
            } else if(term === "Last 500"){
                return {
                    value: term,
                    trimmedValue: term,
                    icon: 'date_range',
                    removable: false,
                };
            } else {
                return {
                    value: term,
                    trimmedValue: term,
                    icon: 'search',
                    removable: true,
                };
            }
        });
   }));

<mat-chip-list>
        <mat-chip *ngFor="let $searchTerm of ($searchTerms | async)" [removable]="$searchTerm.removable" (removed)="removeSearchTerm($searchTerm.value)"  [matTooltip]="$searchTerm.value">
            <mat-icon matSuffix>{{$searchTerm.icon}}</mat-icon>
            {{$searchTerm.trimmedValue}} 
            <mat-icon matChipRemove *ngIf="$searchTerm.removable">cancel</mat-icon>
        </mat-chip>
    </mat-chip-list>

Answer 1

您的代码是“最好的”，但是如果您要这样做的话，可以将其缩短：

...
  .pipe(
    map(response) => response.map(term => term.length > 25 ? { 
      value: term,
      trimmedValue: `${term.substring(0, 25)...}`
      icon: 'search',
      removable: true,
    } : term === "Last 500" ? {
      value: term,
      trimmedValue: term,
      icon: 'date_range',
      removable: false,
    } : {
      value: term,
      trimmedValue: term,
      icon: 'search',
      removable: true,
    })
  )

如何更好地做到这一点

1 个答案: