【发布时间】：2019-05-06 16:17:56
【问题描述】：
我是 Angular 6 的新手，所以请。我有我的 component.ts 我有我的回应。现在我想根据我的 HTML 页面中的过滤器值绑定数据。即用户点击所有者名称。现在我想在我的 HTML 页面的右上角显示所有者名称。我怎样才能做到这一点？
这是我的 HTML 页面的样子。
import { CampaignService } from './../../../services/campaign.service';
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
constructor(private campaignService : CampaignService) { }
Time :any;
campaigns :any;
filter;
show:boolean = false ;
ngOnInit(){
setInterval(() => {
this.Time = Date.now()
}, 1000);
this.campaignService.CampaignsInfo()
.subscribe(response=>{
this.show = false;
this.campaigns = response;
});
}
filterByOwnr(val){
if(val != null)
{
this.show=true;
}
else
{
this.show=false;
}
this.filter = val;
}
}我的 HTML 页面如下所示：
<campaign-header></campaign-header>
<div class="container-fluid date-time sticky-top">
<div class="container">
<div class="d-flex justify-content-end" style="margin-top: -16px;">
<span id="date_time"><i class="zmdi zmdi-calendar-check zmdi-hc-fw"></i> {{Time | date}} <i class="zmdi zmdi-time zmdi-hc-fw"></i> {{ Time | date:'mediumTime' }} </span>
</div>
</div>
</div>
<br>
<!-- content -->
<div class="container">
<h3>Campaigns</h3>
<div class="clearfix"></div>
<div class="row">
<div class="col-sm-12">
<div class="card campaign border-top wrap mt-4">
<br>
<div class="card-body table-responsive">
<table class="table table-hover mb-0 ">
<thead>
<tr>
<th class="border-top-0">CAMPAIGN </th>
<th class="border-top-0">STATUS</th>
<th class="border-top-0">DIALED</th>
<th class="border-top-0">OWNERS</th>
<th class="border-top-0"> <span class="invisible">Action</span></th>
<th></th>
<!-- <button mat-button color="primary" routerLink="/campaign-details">CampaignDetails</button> -->
</tr>
</thead>
<tbody>
<tr *ngFor="let campaign of campaigns?.result | filter : 'OWNERS' : filter;">
<td style="max-width:280px">
<p>{{campaign.CampaignName}}</p>
<small>{{campaign.DepartmentName}}</small>
</td>
<td>
<small class="text-info">Active</small>
</td>
<td>
<p>{{campaign.Dialed}} / <small>1500000</small></p>
<div class="progress mt-2 w-75">
<div class="progress-bar bg-info" role="progressbar" style="width: 90%;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td>
<span class="badge badge-pill badge-secondary cursor" (click)="filterByOwnr(campaign.CampaignName)"> {{ campaign.CampaignName }} </span>
<a (click)="filterByOwnr()" *ngIf=show style="position: relative; left: -16px; top: -1px; color: #fff; font-size: 8px; border: 1px solid #fff; border-radius: 15px; font-weight: bold; cursor: pointer; "><i class="zmdi zmdi-close zmdi-hc-fw"></i> </a>
</td>
<td class="ml-0 pl-0">
<a [routerLink]="['/campaign-details' , campaign.Id]" [queryParams]="{ CampaignName : campaign.CampaignName , SubCampaign : campaign.SubCampaign, DepartmentName : campaign.DepartmentName }"><img src="../../assets/Images/next.png" class="next" /></a>
<a (click)="filterByOwnr()" *ngIf=show class="close_icon"><i class="zmdi zmdi-close zmdi-hc-fw"></i> </a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<br>
</div>【问题讨论】：
-
所有者名称是什么？
campaign.CampaignName? -
@xyz 是的，先生。到目前为止，我还没有所有者列表来填充数据，所以我暂时使用广告系列名称作为所有者名称。
-
在所有者部分的
anchor i.e. a tag上设置click侦听器的目的是什么？ -
@xyz 它只是向过滤器发送一个空列表，以便它充当返回按钮以返回所有广告系列的列表。