angular2 и ngIf - проверьте, больше или меньше

Question

Как это сделать? Если значение равно 9 или меньше, отобразите «Месяц», иначе отобразите «Месяцы». Вот мой код:

<select id="analysis_horizon" class="custom-select form-control" [(ngModel)]="basic_setup.analysis_horizon" formControlName="analysis_horizon" describedby="basic-addon_analysis_horizon"> 
    <option disabled>Select Analysis Horizon</option> 
    <option *ngIf="'i<=9'" *ngFor="let i of analysis_horizon_array">{{i}} Month</option> 
    <option *ngIf="'i>9'" *ngFor="let i of analysis_horizon_array">{{i}} Months</option> 
</select> 

Это ошибка, я получаю:

Can't have multiple template bindings on one element. Use only one attribute named 'template' or prefixed with * ("isabled>Select Analysis Horizon ]*ngFor="let i of analysis_horizon_array">{{i}} Month {{i}} Month 9'" [ERROR ->]*ngFor="let i of analysis_horizon_array">{{i}} Months ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors: Can't have multiple template bindings on one element. Use only one attribute named 'template' or prefixed with * ("isabled>Select Analysis Horizon ]*ngFor="let i of analysis_horizon_array">{{i}} Month {{i}} Month 9'" [ERROR ->]*ngFor="let i of analysis_horizon_array">{{i}} Months

Answer 1

Вы не можете использовать несколько привязок шаблона на одном элементе, в этом случае *ngIf и *ngFor. Вы можете добиться того, чего хотите с помощью интерполяции и тройного оператора, вам не нужно использовать директиву *ngIf:

<select id="analysis_horizon" class="custom-select form-control" [(ngModel)]="basic_setup.analysis_horizon" formControlName="analysis_horizon" describedby="basic-addon_analysis_horizon"> 
    <option disabled>Select Analysis Horizon</option> 
    <option *ngFor="let i of analysis_horizon_array"> 
     {{i}} {{ i <= 9 ? "Month" : "Months" }} 
    </option> 
</select>