Question

在尝试选中第一列中的复选框后，我试图在带有角垫的检查表中显示下一步。

<table mat-table [dataSource]="checklist.checklistStepList" matSort>

  <ng-container matColumnDef="checked">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Checked</th>
    <td mat-cell *matCellDef="let step" *ngIf="displayStep(step)"><mat-checkbox [checked]="step.result==='CHECKED'" (change)="updateCheck(step)"></mat-checkbox></td>
  </ng-container>

  <ng-container matColumnDef="step">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Step</th>
    <td mat-cell *matCellDef="let step" *ngIf="displayStep(step)">{{step.title}}</td>
  </ng-container>

  <ng-container matColumnDef="description">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Description</th>
    <td mat-cell *matCellDef="let step" *ngIf="displayStep(step)">{{step.description}}</td>
  </ng-container>

  <ng-container matColumnDef="owner">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Owner</th>
    <td mat-cell *matCellDef="let step" *ngIf="displayStep(step)">{{step.owner}}</td>
  </ng-container>

  <ng-container matColumnDef="date">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Date</th>
    <td mat-cell *matCellDef="let step" *ngIf="displayStep(step)">{{step.date}}</td>
  </ng-container>

  <ng-container matColumnDef="assignment">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Assignments</th>
    <td mat-cell *matCellDef="let step" *ngIf="displayStep(step)">{{step.assignment}}</td>
  </ng-container>


  <tr mat-header-row *matHeaderRowDef="columnToDisplay"></tr>
  <tr mat-row *matRowDef="let row; columns: columnToDisplay"></tr>
</table>

正如您在此处看到的那样，我正在尝试使用功能displayStep(step)隐藏/显示清单步骤，该功能只是一个告诉我是否应显示该步骤并返回布尔值的功能。

这里的问题是我的step参数无法识别。

我希望作为输出可以看到第一步，然后在检查后显示下一步。

Stackblitz：https://stackblitz.com/edit/angular-fwnnzf

Answer 1

要隐藏未选中的行，您可以这样

import UIKit

//You need to confirm your ChildToParentProtocol with your UIViewController
class ViewController: UIViewController, ChildToParentProtocol {

    var selectedTFTag = 0
    var weightVC : WeightViewController!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        if segue.identifier == "weight" {
            weightVC = segue.destination as? WeightViewController
            //You need to pass delegate to containerview to make it working.
            weightVC.delegate = self
        }
    }

    @IBAction func btn1Tapped(_ sender: Any) {

        //According to selected Tag perform your action
        if selectedTFTag > 0 {
            switch selectedTFTag {
            case 1:
                //set up first UITextField
                weightVC.tf1.text = "First textfield was selected"
                print("1")
            case 2:
                //set up second UITextField
                weightVC.tf2.text = "Second textfield was selected"
            default:
                break
            }
        }
    }

    @IBAction func btn2Tapped(_ sender: Any) {

        //According to selected Tag perform your action
        if selectedTFTag > 0 {
            switch selectedTFTag {
            case 1:
                //set up first UITextField
                weightVC.tf1.text = "First textfield was selected"
                print("1")
            case 2:
                //set up second UITextField
                weightVC.tf2.text = "Second textfield was selected"
            default:
                break
            }
        }
    }

    func setFocusedElement(with value: Int) {
        //Get selected TF tag with delegate
        selectedTFTag = value
    }
}

<tr mat-header-row *matHeaderRowDef="columnToDisplay"></tr> <tr mat-row *matRowDef="let row; columns: columnToDisplay" [hidden]="!row.checked"> </tr>同时隐藏

您可以看到示例here

Answer 2

我已经更新了您的stackbliz：https://stackblitz.com/edit/angular-fwnnzf-3p7xvo

说明：

在应用程序初始化中准备步骤清单。

prepareSteps(){
    this.checklistSteps = [];
    for(let i = 0; i < STEPS_MOCK.length ; i++){
      let currStep = STEPS_MOCK[i];

      //push the step to stepList.
      this.checklistSteps.push(currStep);

      //if the last pusded step is not checked then our list is complete so exit the loop
      if(!currStep.checked){
        break;
      }
    }
  }

然后在每个复选框更改事件更新子步骤中进行操作，然后使用更新的stpes准备列表。

我希望这会有所帮助。

选中复选框后动态显示mat-table行

2 个答案: