Question

我目前正在我的angular 4应用程序的表格中显示数据并应用stying。我已经实施了通过创建要在配置文件中突出显示的字段并循环遍历这些行并突出显示

来进行样式设置

表

html代码

 <!-- Income table -->
            <div *ngIf="selectedFinancialOption===1 && fsIncomeStatementTable && fsIncomeStatementTable.length > 0" class="tab-pane fade active show" id="base-strategy--fs-statement" role="tabpanel" aria-labelledby="table-tab"
                aria-expanded="false">
                <table class="table">
                    <thead>
                        <tr style="height:50px">
                            <th *ngFor="let cell of fsIncomeStatementTable[0]"> {{cell}}</th>

                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let row of fsIncomeStatementTable | slice:1" [ngClass]="{'net-cost': row[0] === incomeStatementStyles[0] || row[0] === incomeStatementStyles[1] || row[0] === incomeStatementStyles[2] || row[0] === incomeStatementStyles[3]}">
                            <td>{{row[0]}}</td>
                            <td *ngFor="let cell of row | slice:1">{{cell | shortAndBlankNumberFormat: 2}}</td>
                        </tr>
                    </tbody>
                </table>

            </div>
            <!-- Income table -->

配置代码

    export const CONSTS: any = {

results: {

    financialStatement: {
        //TO DO SORT THIS OUT - Used for Styling
        incomeStatementStyling: 'Net premiums written|AY Underwriting Gain|Net Investment income|Net Operating Income|Net Income',
        cashFlowStyling: 'Net Cash provided by operating activities|Cash and Investments, end of year',
        balanceSheetStyling: 'Total Cash and Investment|Total Assets|Total Liabilites|Total Liabilities Total Sh. Equity'
    }
}
}

角度组件

    const incomeStatementStyling: string[] = String(CONSTS.results.financialStatement.incomeStatementStyling).split('|');

    export class FinancialStatementComponent extends ReactiveComponent implements OnInit {
      isExpanded = false;

      incomeStatementStyles: string[] = incomeStatementStyling;

      constructor(private _projectionService: ProjectionService) {
    super();
  }

  @Input() set fsResult(value: FinancialStatementAnalysis) {
    this.processFSResults(value);
  }

   processFSResults(value: FinancialStatementAnalysis) {
    if (!value) {
      return;
    }
    this._fsIncomeStatementTable = this._projectionService.fsIncomeStatementResults(value.incomeStatement);

  }

      }

我现在需要过滤某些行。我该如何处理？它是在配置中还是在组件级别执行？

Answer 1

要过滤Angular中的数据，您只需执行以下操作：

this.filteredData = this.Data.filter((item) => item.Name.toUpperCase() === this.otherData.Name.toUpperCase());

有关here.

的更多信息

以角度4过程以语法方式过滤行

1 个答案: