Question

我有一个称为“承租人”的主列表，因此基于选中的复选框，我需要根据leaseLists年筛选承租人列表。因此，如果租户列表的租约对象位于当年，则必须显示该特定租户或将其隐藏。 leaseLists的筛选已完成。谁能帮助我根据过滤后的leaseList过滤主要租户列表。如果未选中该复选框，则应显示完整列表。

HTML：

<div class="col-md-8" id="current-tenant-toggle">
  <input type="checkbox" class="cursor" id="current-tenant"   (change)="selectValue($event)" /><label
    class="cursor"
    for="current-tenant" 
    >Only current tenants</label
  >
</div>

请找到工作示例：

DEMO

Answer 1

我已经解决了您的问题，

您必须在app.component.html页面中进行以下更改

    <div class="col-md-8" id="current-tenant-toggle">
    <input type="checkbox" class="cursor" id="current-tenant"   (change)="selectValue($event)" />
    <label class="cursor"
        for="current-tenant" 
        >Only current tenants</label
      >
</div>
<div class="" id="tenant-list">
    <div class="row">
        <div class="col-sm-12 accordion-grid ">
            <div>
                <div *ngFor="let tenant of selectedMembers; let i = index">
                    <div>
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-2">Suite</div>
                                <div class="col-2 accordion-grid-col">{{ tenant.suite }}</div>
                                <div class="col-3">Company Name</div>
                                <div class="col-3 accordion-grid-col">
                    {{ tenant.companyName }}
                                </div>
                                <div class="col-2">Sq Ft</div>
                                <div class="col-2 accordion-grid-col">{{ tenant.sqFt }}</div>

                                <div class="col-3">Contact Name</div>
                                <div class="col-3 accordion-grid-col">
                    {{ tenant.contactName }}
                                </div>
                                <div class="col-2">Action</div>
                                <div class="col-2 accordion-grid-col">
                                    <div>
                                        <i class="fa fa-pencil action"  title="Edit" (click)="editTenant($event, tenant)">
                                        </i>
                                        <i class="fa fa-trash action" title="Delete" (click)="deleteTenant($event, tenant.id, i)">
                                        </i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

并在app.component.ts文件中进行更改，使selectedMembers变量在ts文件中变为灰色

selectedMembers: any[]; 

ngOnInit() {
    this.selectedMembers = this.tenants;
  }

  selectValue(evt) {
    selectedMembers = []
    console.log(evt.isTrusted)
    if(evt.isTrusted){
    console.log(this.tenants, "this.tenants")
    let startDate = new Date().getFullYear();
    this.tenants.map(obj => {
      if (obj.leaseList.length) {
        let chckorthecurrentDate=false
        obj.leaseList.map(
          m => {
            if (new Date(m.dateEnd).getFullYear() == startDate) {
            chckorthecurrentDate=true
            }
          })
          if(chckorthecurrentDate){
             chckorthecurrentDate=false
            selectedMembers.push(obj)
          }
      }
    })
    console.log(selectedMembers)
  } else {
    this.selectedMembers = this.tenants;
  }

Answer 2

在一个<ng-container>元素中放置* ngFor，然后在一个<div>元素中使用* ngIf，

<ng-container *ngFor="let tenant of tenants; let i = index">
    <div *ngIf="leaseIsCurrentYear(tenant)">
        ....
    </div>
</ng-container>

使用leaseIsCurrentYear(tenant)方法测试日期是否可以显示当前租户。

希望对您有所帮助！

如何使用angular2过滤后根据可用列表过滤主数据

2 个答案: