Question

我在对话框上有2个按钮，在2种情况下，无论是新建表单还是编辑表单，都必须使用此对话框。但是在编辑表单的情况下，这两个按钮应该是可见的，而在新情况下，只有保存按钮应该是可见的

<div class="row">
<div class="col">
  <div class="col-lg">
    <button class="simple-btn" (click)="delete()" mat-button>Delete</button>
  </div>
</div>

<div class="col">
  <div class="col-lg-12">
    <button type="button" class="simple-btn" (click)="save()" mat-button>Save</button>
  </div>
</div>

Answer 1

您可以为每种情况添加变量，并在按钮或div上方使用ngIf。在您的组件中，您需要设置new和edit，或者由于您在谈论对话框，它们将需要来自Input。

在您的组件中，您将需要以下内容：

@Input edit: boolean; // Coming from parent saying if you are in edit mode

或使用一些逻辑来分配编辑：

if(logic to know if im editing) {
    edit = true or false
}

HTML：

<div class="row">
<div class="col">
  <div class="col-lg" *ngIf="edit">
    <button class="simple-btn" (click)="delete()" mat-button>Delete</button>
  </div>
</div>

<div class="col">
  <div class="col-lg-12">
    <button type="button" class="simple-btn" (click)="save()" mat-button>Save</button>
  </div>
</div>

Angular 6如何使一个或两个按钮可见

1 个答案: