Question

这是逻辑：输入后，执行以下if语句

if (!elementB.isOpen){
    elementB.open()
else {
    elementC.open()
    elementC.focus()
    elementB.close()
}

我要使用？条件运算符并将其添加到（keyup.enter）之后：

<mat-form-field (keyup.enter)="!elementB.isOpen ? elementB.open() : elementC.open();elementC.focus();elementB.close()">

但是上面的代码给了我一个错误。看来我无法使用conditional operator( ? : )执行多行代码。

有人可以帮我吗？谢谢！

Answer 1

使用组件文件，而不要填充充满逻辑的模板：

<mat-form-field (keyup.enter)="elementActions()">

在您的组件中：

public elementActions(): void {
  if (!this.elementB.isOpen) {
    elementB.open();
  } else {
    this.elementC.open();
    this.elementC.focus();
    this.elementB.close();
  }
}

我知道这很普通，但这是component.ts文件真正应该使用的。

Answer 2

尝试在方法中提供else，以便简化逻辑

<mat-form-field (keyup.enter)="!elementB.isOpen ? elementB.open() : changeElement(elementC,elementB)">

  changeElement(elementC: any, elemenB: any) :void {
        elementC.open();
        elementC.focus();
        elementB.close();
    }

Answer 3

将其包裹在括号中

<mat-form-field (keyup.enter)="!elementB.isOpen ? (elementB.open()) : (elementC.open(),elementC.focus(),elementB.close())">

角条件运算符：执行多个语句

3 个答案: