如何使用Angular2单击添加按钮时隐藏主体中的删除按钮并在下一个添加弹出窗口中显示它

Question

我有一个md卡内容，其中存在添加和删除按钮。打开页面时，我只需要添加按钮。当我点击添加按钮时，将打开另一个必须包含添加和删除按钮的md卡。现在一切都按照我的要求正常工作，但我没有隐藏主md卡中的删除按钮。请帮助。

HTML：

<md-card *ngFor="let positionDetails of positions; let i = index">
                            <div class="clearfix col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                <button  (click)="openAddPosition()" > +  </button>
                                <h6 class="color-primary md-headline">Page</h6>
                            </div>
                            <button (click)="deletePosition(row_ind)" style="font-size: 35px;top: -6%; left: 0%;">-</button>
                            <div >
                                <md-input-container>
                                    <input mdInput type="text" name="position" [(ngModel)]="positionDetails.position" [ngModelOptions]="{standalone: true}"  required>
                                </md-input-container>
                                <md-input-container>
                                    <input mdInput type="text" name="unit" [(ngModel)]="positionDetails.unit" [ngModelOptions]="{standalone: true}" required>
                                </md-input-container>
                                <md-input-container>
                                    <input mdInput type="text" name="office_country" [(ngModel)]="positionDetails.office_country" [ngModelOptions]="{standalone: true}" required>
                                </md-input-container>
                                <md-input-container>
                                    <input mdInput type="text" name="office_city" [(ngModel)]="positionDetails.office_city" [ngModelOptions]="{standalone: true}" required>
                                </md-input-container>
                                <md-input-container>
                                    <input mdInput type="text" name="monthly_target" [(ngModel)]="positionDetails.monthly_target" [ngModelOptions]="{standalone: true}" >
                                </md-input-container>
                                <md-input-container>
                                    <input mdInput type="text" name="wage" [(ngModel)]="positionDetails.wage" [ngModelOptions]="{standalone: true}" >
                                </md-input-container>
                            </div>
                            </md-card>

Answer 1

如果你需要隐藏第一个/主要div的删除，你可以检查index，如果它的0你可以hide it

<md-card *ngFor="let positionDetails of positions; let i = index">
  ...
  ...
  <button *ngIf="i !== 0" (click)="deletePosition(row_ind)" style="font-size: 35px;top: -6%; left: 0%;">-</button>
</md-card>

Answer 2

要旨

你可以在这里做的是检查位置的长度，并在你的CSS中添加一个类，将visiblity设置为隐藏。

模板

 <button (click)="deletePosition(row_ind)" [ngClass]="{'style1': visibile}"></button>

零件

检查位置的长度是否更多，如果是，则将其视为false，否则为true。

CSS

.style1{
  visiblity : hiddden;
}