无法在 Angular 中将条件作为布尔值传递

Question

我想尝试在字符串子句中传递条件，因为这些参数在目标组件中：

source.component:

export class TestComponent implements OnInit {
  condition: boolean;

  ngOnInit() {
    this.condition = !"element.id === 2";
  }
}

但是，我不能在目标组件中使用这个条件：

target.component:

@Input() condition;


<button *ngIf="!condition" mat-menu-item (click)="openDialog(element)">Edit</button>

这是这个问题的演示：

DEMO

为什么我不手动将这些参数添加到目标组件是因为；它是一个可重用的组件，另一个组件的条件可能不同。那么，如何从另一个组件传递条件？

随便看看

<button *ngIf="element.id % 2 === 0" mat-menu-item (click)="openDialog(element)">Edit</button>

而不是设置 *ngIf="element.id % 2 === 0，我需要从另一个组件传递 element.id % 2 === 0 部分，例如条件：'element.id % 2 === 0'。然后我需要通过此组件中的 @Input 获取该选项。但是我收到它作为字符串，当我转换它时总是 returns true :(

Answer 1

您可以像这样在 target 组件中将条件作为函数传递。

target.component:

condition: any;
ngOnInit(){
   this.condition = (id: any): boolean => {
      return id !== 2;
   }
}

在你的 target.component

<button *ngIf="condition(element.id)" mat-menu-item (click)="openDialog(element)">Edit</button>

Working Stackblitz

因此，在此实施中，您将使您的代码更加安全。因为javascript eval不推荐，因为eval可以执行里面任何js的代码。所以黑客可以攻击那个区域。所以你可以实现上面的解决方案。

Answer 2

为此，您需要了解 angular 如何将表达式解析为字符串，

内部使用eval('expression as string')

我确实改变了初始化如下

源组件：

export class TestComponent implements OnInit {
  condition: boolean;

  ngOnInit() {
    this.condition = "eval('!(element.id === 2)')";
  }
}

这是有效的 link： Working Demo link

Answer 3

老实说，尝试将条件作为字符串传递是一种糟糕的方法。您应该尝试传递一个函数。

TS:

condition: (number) => boolean;

ngOnInit() {
  this.condition = id => id % 2 === 0;
}

HTML 目标

<button *ngIf="!condition(element.id)" mat-menu-item (click)="openDialog(element)">Edit</button>

勾选Stackblitz

更新：

对于多个可选条件，更好的做法是实现OnChanges

TS:

options: Options[];

ngOnInit() {

  this.options = [
    { id: 1, isTest: false },
    { id: 2, isTest: true },
    { id: 8, isTest: true }
  ];
}

目标TS：

ngOnChanges(changes: SimpleChanges): void {
  if (changes.options) {
    this.options.forEach(option => {
      const element = this.database.find(data=>data.id === option.id);
      if (element) element.isTest = option.isTest
    })
  }
}

HTML 目标

<button *ngIf="element.isTest" mat-menu-item (click)="openDialog(element)">Edit</button>

见Stackblitz

Answer 4

您可以使用eval

export class TestComponent implements OnInit {
  condition: string;

  ngOnInit() {
    this.condition = "eval('!(element.id === 2'))";
  }
}

无法在 Angular 中将条件作为布尔值传递

Cannot pass condition as boolean in Angular

javascript

components

boolean

angular-material

angular