Question

我正在一个项目上，我需要显示一个获取数据的表，一旦输入数据，该表就会自动填充。当我打开每种类型的贷款的个案以显示该表时，我希望这样做，但当我打开小额贷款以向我添加额外的<td></td>时除外。下面是我的代码：

<div [formGroup]="collateralSummaryData">

    <table class="table">
        <tr>
            <th class="table-us50"></th>
            <th class="table-us50" colspan="6">Internal Appraiser</th>
            <th class="table-us50" colspan="1">Risk Analyst</th>
            <th class="table-us50" colspan="3">CDD Specialist</th>
            <th class="table-us50" colspan="1"></th>
        </tr>

        <td class="table-us36">Nr.</td>
        <td class="table-us36">Time collateral registration process/ Koha e regjistrimit te procesit te kolateralit</td>
        <td class="table-us36">Collateral Type/ Tipi kolateralit</td>
        <td class="table-us36">Property number/ Numri I pasurise</td>
        <td class="table-us36">Property name/ Emri i pasurise</td>
        <td class="table-us36">Other details/Detaje te tjera</td>
        <td class="table-us36">Vlera e prones varet ne menyre materiale nga kapaciteti I kredimarresit</td>
        <td class="table-us36">Risku i klientit varet ne menyre materiale nga performanca e prones/projektit</td>
        <td class="table-us36">Prona eshte regjistruar ne favor te bankes</td>
        <td class="table-us36">Prona konvertohet ne cash brenda nje kohe te arsyeshme</td>
        <td class="table-us36">Kontrata e hipotekes paraqet nje titull ekzekutiv per pasurine</td>
        <td class="table-us36">Name of owner/ Emri i zoteruesit</td>

        <tr formArrayName="COLLATERAL_BRANCH" *ngFor="let collateralBranch of collateralSummaryData['controls']['COLLATERAL_BRANCH']['controls']; let i=index">

            <ng-container [formGroupName]="i">
                <td class="table-us36">{{i + 1}}</td>

                <td class="table-us36">
                    {{collateralBranch.value.COLLATERAL_ELIGIBILITY_INTERNAL_APPRAISER.TIME_COL_REG}}
                </td>

                <td class="table-us36">
                    {{collateralBranch.value.COLLATERAL_ELIGIBILITY_INTERNAL_APPRAISER.IA_COL_TYPE}}
                </td>

              <td class="table-us36">
                    {{collateralBranch.value.COLLATERAL_ELIGIBILITY_INTERNAL_APPRAISER.IA_PROPERTY_NO}}
                </td>

                <td class="table-us36">
                    {{collateralBranch.value.COLLATERAL_ELIGIBILITY_INTERNAL_APPRAISER.IA_PROPERTY_NAME}}
                </td>

                <td class="table-us36">
                    {{collateralBranch.value.COLLATERAL_ELIGIBILITY_INTERNAL_APPRAISER.IA_OTHER_DETAILS}}
                </td>

                <td class="table-us36">
                    {{collateralBranch.value.COLLATERAL_ELIGIBILITY_INTERNAL_APPRAISER.IA_HOW_PROPERTY_IS_MEASURED}}
                </td>

                <td class="table-us36">
                    {{collateralBranch.value.COLLATERAL_ELIGIBILITY_RISK_ANALYST.RA_CLIENT_RISK}}
                </td>

                <td class="table-us36">
                    {{collateralBranch.value.COLLATERAL_ELIGIBILITY_CCD_SPECIALIST.CDD_PROPERTY_REGISTRATION}}
                </td>

                <td class="table-us36">
                    {{collateralBranch.value.COLLATERAL_ELIGIBILITY_CCD_SPECIALIST.CDD_PROPERTY_CONVERT_TO_CASH}}
                </td>

                <td class="table-us36">
                    {{collateralBranch.value.COLLATERAL_ELIGIBILITY_CCD_SPECIALIST.CDD_MORTGAGE_CONTRACT}}
                </td>
                <td class="table-us36">
                    {{collateralBranch.value.COLLATERAL_ELIGIBILITY_CCD_SPECIALIST.CDD_NAME_OF_OWNER}}
                </td>

            </ng-container>
        </tr>
    </table>
</div>

我已经在.ts上添加了

get isMicro(){
      let productItems =  <FormArray>(<FormGroup>(<FormGroup>(this.documentService.documentForm.controls['PRODUCTS_INFO'])).controls['PRODUCT_ITEM_S']).controls['PRODUCT_ITEM'] ;
      let productId = (<FormGroup>(<FormGroup>productItems.controls[0]).controls['GENERAL_PRODUCT_DATA']).controls['PRODUCT_DATA_PRODUCT_ID'].value;
      if(productId == "10") //tobechanged
      return true;
    return false;
  }

我知道我必须在某个地方添加*ngIf="isMicro"，但不知道在哪里！

Answer 1

注意：显然，您将对其进行更改以添加更多<td>元素以创建更多列，但为简便起见，我将只编辑<th>并为您提供如何使用在这种情况下，ifelse。

我可能会这样做的方法是在条件的两个地方使您的代码几乎完全相同，并用if if方式对代码进行划分。这样，您就可以保持一致，以确保它们在各自的特殊情况下看起来都正确。

<div [formGroup]="collateralSummaryData">

            <table class="table" *ngIf="isMicro(); else else_statment">
                <tr>
                    <th class="table-us50"></th>
                    <th class="table-us50" colspan="6">Internal Appraiser</th>
                    <th class="table-us50" colspan="1">Risk Analyst</th>
                    <th class="table-us50" colspan="3">CDD Specialist</th>
                    <th class="table-us50" colspan="1"></th>
                    <th class="table-microcolumn" colspan="1"></th>
                </tr>
               ... etc
             </table>
  <ng-template #else_statment>
    <div [formGroup]="collateralSummaryData">

            <table class="table" *ngIf="isMicro(); else else_statment">
                <tr>
                    <th class="table-us50"></th>
                    <th class="table-us50" colspan="6">Internal Appraiser</th>
                    <th class="table-us50" colspan="1">Risk Analyst</th>
                    <th class="table-us50" colspan="3">CDD Specialist</th>
                    <th class="table-us50" colspan="1"></th>
                    <th class="table-microcolumn" colspan="1"></th>
                </tr>
             ... etc
  </ng-template>

一个简单的答案（但是事情并不一定符合您的要求），如果isMicro（）的值为true，则只需添加所需的列即可。

<div [formGroup]="collateralSummaryData">

    <table class="table">
        <tr>
            <th class="table-us50"></th>
            <th class="table-us50" colspan="6">Internal Appraiser</th>
            <th class="table-us50" colspan="1">Risk Analyst</th>
            <th class="table-us50" colspan="3">CDD Specialist</th>
            <th class="table-us50" colspan="1"></th>
            <th class="table-us50" colspan="1" *ngIf="isMicro()"></th>
        </tr>

        <td class="table-us36">Nr.</td>
        <td class="table-us36">Time collateral registration process/ Koha e regjistrimit te procesit te kolateralit</td>
        <td class="table-us36">Collateral Type/ Tipi kolateralit</td>
        <td class="table-us36">Property number/ Numri I pasurise</td>
        <td class="table-us36">Property name/ Emri i pasurise</td>
        <td class="table-us36">Other details/Detaje te tjera</td>
        <td class="table-us36">Vlera e prones varet ne menyre materiale nga kapaciteti I kredimarresit</td>
        <td class="table-us36">Risku i klientit varet ne menyre materiale nga performanca e prones/projektit</td>
        <td class="table-us36">Prona eshte regjistruar ne favor te bankes</td>
        <td class="table-us36">Prona konvertohet ne cash brenda nje kohe te arsyeshme</td>
        <td class="table-us36">Kontrata e hipotekes paraqet nje titull ekzekutiv per pasurine</td>
        <td class="table-us36">Name of owner/ Emri i zoteruesit</td>

        <tr formArrayName="COLLATERAL_BRANCH" *ngFor="let collateralBranch of collateralSummaryData['controls']['COLLATERAL_BRANCH']['controls']; let i=index">

            <ng-container [formGroupName]="i">
                <td class="table-us36">{{i + 1}}</td>

                <td class="table-us36">
                    {{collateralBranch.value.COLLATERAL_ELIGIBILITY_INTERNAL_APPRAISER.TIME_COL_REG}}
                </td>

                <td class="table-us36">
                    {{collateralBranch.value.COLLATERAL_ELIGIBILITY_INTERNAL_APPRAISER.IA_COL_TYPE}}
                </td>

              <td class="table-us36">
                    {{collateralBranch.value.COLLATERAL_ELIGIBILITY_INTERNAL_APPRAISER.IA_PROPERTY_NO}}
                </td>

                <td class="table-us36">
                    {{collateralBranch.value.COLLATERAL_ELIGIBILITY_INTERNAL_APPRAISER.IA_PROPERTY_NAME}}
                </td>

                <td class="table-us36">
                    {{collateralBranch.value.COLLATERAL_ELIGIBILITY_INTERNAL_APPRAISER.IA_OTHER_DETAILS}}
                </td>

                <td class="table-us36">
                    {{collateralBranch.value.COLLATERAL_ELIGIBILITY_INTERNAL_APPRAISER.IA_HOW_PROPERTY_IS_MEASURED}}
                </td>

                <td class="table-us36">
                    {{collateralBranch.value.COLLATERAL_ELIGIBILITY_RISK_ANALYST.RA_CLIENT_RISK}}
                </td>

                <td class="table-us36">
                    {{collateralBranch.value.COLLATERAL_ELIGIBILITY_CCD_SPECIALIST.CDD_PROPERTY_REGISTRATION}}
                </td>

                <td class="table-us36">
                    {{collateralBranch.value.COLLATERAL_ELIGIBILITY_CCD_SPECIALIST.CDD_PROPERTY_CONVERT_TO_CASH}}
                </td>

                <td class="table-us36">
                    {{collateralBranch.value.COLLATERAL_ELIGIBILITY_CCD_SPECIALIST.CDD_MORTGAGE_CONTRACT}}
                </td>
                <td class="table-us36">
                    {{collateralBranch.value.COLLATERAL_ELIGIBILITY_CCD_SPECIALIST.CDD_NAME_OF_OWNER}}
                </td>

            </ng-container>
        </tr>
    </table>
</div>

ngIf *与ngShow *的简单不完整概述：

如果您要删除整个表的DOM元素，则可以使用* ngIf

（看起来像您在HTML中的第二行）

<table class="table" *ngIf="!isMicro()">

如果您只是试图“隐藏”表并将其保留在DOM中，则可以使用* ngIf

<table class="table" *ngShow="!isMicro()">

根据将如何使用此页面以及您打算做什么来决定使用哪个页面。一个示例是，如果您需要经常取消隐藏和隐藏。如果真是这样，那么* ngShow在性能方面就不那么昂贵了。

在Angular中有条件地显示表格

1 个答案: