Напишите условие if-else angular 4 для flexGrow
В своем приложении я использую концепцию fexbox, чтобы показать название компании и головную компанию материала. Я использовал здесь ngx-datatable. Я установил columnmode на flex. Теперь я установил flexgrow для каждого столбца на 1. Я хочу написать условие if-else в случае flex-grow для этих двух столбцов. например, если нажата selectedCompany, рост второго столбца будет 2, иначе он будет 1.
<ngx-datatable *ngIf = "companies && companies.length" class = "material" [scrollbarH] = "true" [rows] = "companies" [externalPaging] = "true" [externalSorting] = "true" [count] = "companyPage.totalElements" [offset] = "companyPage.number" [limit] = "companyPage.size"
[columnMode] = "'flex'" [footerHeight] = "'auto'" [headerHeight] = "'auto'" [rowHeight] = "'auto'" (page)='onCompanyPageEvent($event)' (sort)='onCompanySortEvent($event)' (activate) = "onActivateCompany($event)">
<ngx-datatable-column [prop] = "'name'" [flexGrow] = "1" >
<ng-template ngx-datatable-header-template >
<span class = "ellipsis" title = "{{value}}">
{{'A921Name' | translate}}
</span>
</ng-template>
</ngx-datatable-column>
// Я пытаюсь написать здесь if-else
<ngx-datatable-column [prop] = "'parentName'" *ngIf = "selectedCompany" [flexGrow] = "2" [sortable] = "false" >
<ng-template ngx-datatable-header-template>
<span class = "ellipsis" title = "{{value}}">
{{'A922ParentCompany' | translate}}
</span>
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
@AnjilDhamala Извините, я новичок в angular. Не могли бы вы объяснить, основываясь на моем коде. Я был бы очень полезен для меня
Ответы 1
Когда вы заключаете атрибут в квадратные скобки, вы делаете его динамическим. Это означает, что он будет искать свойства в соответствующем классе машинописного текста. Таким образом, для статических значений, подобных тому, что у вас здесь [footerHeight] = "'auto'", вам не нужно заключать footerHeight в квадратную скобку, поскольку вы устанавливаете его в строку 'auto'. Можно просто сделать footerHeight = "auto". Однако, если в вашем классе машинописного текста есть свойство, которое содержит строковое значение для footerHeight, например:
export class RelatedPage {
footerHeightValue: string;
constructor(){
this.footerHeightValue = 'auto';
}
}
затем вы можете выполнить динамическое связывание и установить для вашего footerHeight соответствующее свойство, как в [footerHeight] = "footerHeightValue";
Итак, когда вы хотите изменить значение вашего атрибута в определенном условном операторе, вы хотите сделать атрибут динамическим, как в [attribute]. В вашем случае, если ваше свойство flexGrow должно измениться в зависимости от того, был ли нажат заголовок или нет, вы можете привязать событие касания к логическому значению.
<span (click) = "titleClicked()">{{companyName}}</span>
и в вашем классе машинописного текста,
export class RelatedPage {
titleSelected: boolean;
titleClicked() {
this.titleSelected = true;
}
}
Теперь вы можете связать свойство titleSelected со своим атрибутом flexBox, как в
[flexBox] = "titleSelected ? 2 : 1"
это оценивается как
if (titleSelected === true) {
flexBox = 2;
} else {
flexBox = 1;
}
вы можете использовать тернарный оператор. [dynamicAttribute] = "someBooleanCondition? 'сделать это': 'сделать то'"