Question

我希望在嵌套循环中过滤JSON我在子循环中有过滤器，但ngFor但我也希望在父级别的过滤器也有角度2我正在使用nglf要调用它正在工作的函数但是我想要另一种方法，因为它有争议的电话

<div *ngFor="let partyAddress of addressDataShow?.data" >
    <div class="row bg-greybg"  *ngIf="companyFilter(partyAddress) || selectedaddress === 'ALL' || isAddressAvailabale > 0">
 <div *ngFor="let partyAddressDetails of partyAddress?.company_address">
          <div *ngIf="selectedaddress === 'ALL' || partyAddressDetails.address_type.indexOf(selectedaddress) > -1">
            <p>Filter data</p>
          </div>
        </div>
<div>
</div>

Answer 1

如果您只想调用该功能。然后使用双花括号{{functionName()}}

调用该函数

<div *ngFor="let partyAddress of addressDataShow?.data" >
    <div class="row bg-greybg"  > {{companyFilter(partyAddress)}}
        <div *ngFor="let partyAddressDetails of partyAddress?.company_address">
          <div *ngIf="selectedaddress === 'ALL' || partyAddressDetails.address_type.indexOf(selectedaddress) > -1">
            <p>Filter data</p>
          </div>
        </div>
    <div>
</div>

Answer 2

在这种情况下，

*ngIf不是最糟糕的选择。你避免*ngIf的原因是什么？

基本上我还有另外两个选择：

切换案例例如：

<div [ngSwitch]="yourExpression">      
    <div *ngSwitchCase="match_expression_1">Show it when condition 1 applies</div>
    <div *ngSwitchCase="match_expression_2">Show it when condition 2 applies</div></div>

[hidden]指令

_

<div [hidden]="yourExpressionHere"></div>

如果能解决您的问题，请告诉我。

Answer 3

或者您可以定义自定义指令：

// ./app/shared/hidden.directive.ts
import { Directive, ElementRef, Input, Renderer } from '@angular/core';

@Directive({ selector: '[myHidden]' })
export class HiddenDirective {

    constructor(public el: ElementRef, public renderer: Renderer) {}

    @Input() myHidden: boolean;

    ngOnInit(){
        // Use renderer to render the emelemt with styles
        console.log(this.myHidden)
        if(this.myHidden) {
            console.log('hide');
            this.renderer.setElementStyle(this.el.nativeElement, 'display', 'none');
        }
    }
}

如何在不使用* ngIf的情况下调用div标签中的函数In Angular 2

3 个答案: