如何動態翻譯資源 ngx-translate

Question

我對 ngx-translate 有疑問。 我不知道如何在 html 中進行動態資源轉換。 例如：

i18n

    "agreement.status.0": "New",
    "agreement.status.1": "Rejected",

html

   <span>
        <mat-form-field appearance="outline">
            <mat-label>{{'choiceType' | translate}}</mat-label>
            <mat-select [(ngModel)]="selectedAgreementType">
                <mat-option *ngFor="let state of agreementStates" [value]="state.id">
                    {{ 'agreement.status.' + state.id | translate}}
                </mat-option>
            </mat-select>
        </mat-form-field>
    </span>

我不知道如何將這個常量字符串與變量連接起來

Answer 1

您可以從后端獲得幫助；

translate(id){
return this.translate.instant('agreement.status.' + id);
}

並像使用它一樣

<mat-option *ngFor="let state of agreementStates" [value]="state.id">
{{translate(state.id) }}
<mat-option>

Answer 2

你可以'agreement.status' | translate 'agreement.status' | translate別名並在選項中使用它。

 <span *ngIf="('agreement.status' | translate) as status">
    <mat-form-field appearance="outline">
        <mat-label>{{'choiceType' | translate}}</mat-label>
        <mat-select [(ngModel)]="selectedAgreementType">
            <mat-option *ngFor="let state of agreementStates" [value]="state.id">
                {{ status[state.id] }}
            </mat-option>
        </mat-select>
    </mat-form-field>
 </span>

Stackblitz 示例