Передать два параметра в модель ng - Typescript

Question

Я новичок ie с angular8.
У меня есть следующий шаблон:

<label class="pr-1 selectLabel" [title]="'alphOrder' | translate">{{'alphOrder' | translate}}</label>
<ng-select class="w-25 p-3" placeholder="Select" [items]="(sortingField | async)?.alphOrder" [clearable]="false" [(ngModel)]="HERE" (change)="sortBy('titles', HERE)" [searchable]="false">
</ng-select>

В первой строке я передал ключ [title] с помощью функции translate.
Я хотел бы сделать то же самое во второй строке с [(ng-model)], с разницей в передаче двух параметров.
Затем я бы хотел передать те же параметры в sortBy функция.
В обоих случаях параметры должны иметь функцию translate. Я хотел бы понять, как написать такую ​​вещь, поскольку я никогда не знаю, как вести себя с синтаксисом шаблона ...!

Answer 1

На самом деле | перевести это пип. Ваша модель нг имеет двустороннюю привязку. Таким образом, вы не можете связать себя с помощью пипса. Вы должны разбить его на две части.

• Модель для просмотра привязки
• ngModelChange

Вот несколько примеров -> https://stackblitz.com/edit/angular-tn9cbn?embed=1&file=src /app/app.component.ts&view=preview

Answer 2

Я переворачиваю проблему в соответствии с вашими потребностями.
Если у вас не слишком много элементов, вы можете сделать что-то подобное в шаблоне (учитывая это во всех json файлах языков Вы поставили все те же ключи):

<ng-select (change)="sortBy(selection)" [(ngModel)]="selection" class="w-25 p-3" placeholder="Select" [clearable]="false" [searchable]="false">
    <ng-option>{{'author' | translate}}</ng-option>
    <ng-option>{{'title' | translate}}</ng-option>
    <ng-option>{{'date' | translate}}</ng-option>

    <!-- and you can continue to unwind elements if there are not too many ... -->

</ng-select>

И это по поводу шаблона.

Что касается файла компонента ts, вы можете активировать выбранный элемент следующим образом:

export class myComponent {

    public val: string;

    sortBy(val) {
        console.log("Dropdown selection:", val);

        // do whatever you want with the translatable element 
    }
}