使用 *ngIf，按钮在 angular 中消失

Question

I am trying to add row to an existing material table using a button. However as I use *ngIf the button doesn't render.

HTML

 <button mat-raised-button color="accent" 
                           (click)="onAddRow()" 
                           *ngIf="addForm.get('rows')">Add</button>  
  

TS

constructor(private fb: FormBuilder) { 

    this.addForm = this.fb.group({
        project: [null ]
    });

    this.rows = this.fb.array([]);
}

 onAddRow() {
    this.rows.push(this.createItemFormGroup());
 }

 createItemFormGroup(): FormGroup {
    return this.fb.group({
        name: " ",
        description: "some description",
        qty: null
    });
 }

Answer 1

ngIf expects a boolean value.

If you pass a method, the method's stable return value will be used. If that value is not a boolean, it must be truthy for your element to be rendered.

If you are expecting an array of items to be returned from your method, you can use the length property as your truthy value. If the array has no items, your element will not be shown.

 <button mat-raised-button color="accent" 
                           (click)="onAddRow()" 
                           *ngIf="addForm.get('rows').length">Add</button> 

Answer 2

Your problem is not the button. It is that the formArray control is created outside of your form. Therefore when you ask for it, nothing is returned back. So if the returned value is undefined the ngIf does not allow it to be visible.

Change your constructor as the following

constructor(private fb: FormBuilder) { 

    this.addForm = this.fb.group({
        project: [null ]
    });
    this.addForm.addControl("rows", new FormArray([]));
}