绑定HTML页面中组件的数据：Angular 6
我是6号角的新手，所以请。我有我的component.ts，我正在回应。现在，我想基于HTML页面中的过滤器值绑定数据。那是用户单击所有者名称时。现在，我想在HTML页面的右上角显示所有者名称。我该如何实现？
这是我的HTML页面的外观。
我的component.ts页面看起来像这样：
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>
2 个答案:
答案 0 :(得分：1)
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 ;
selectedOwner:string;
ngOnInit(){
setInterval(() => {
this.Time = Date.now()
}, 1000);
this.campaignService.CampaignsInfo()
.subscribe(response=>{
this.show = false;
this.campaigns = response;
});
}
filterByOwnr(val){
if(val != null)
{
this.selectedOwner = val;
this.show=true;
}
else
{
this.show=false;
}
this.filter = val;
}
}
<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">
<span class="badge badge-pill badge-secondary" *ngIf="selectedOwner && show"> {{selectedOwner}} </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>{{selectedOwner}}</span>
<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>
在这里，我假设您一次只能从看起来是这样的代码中筛选一位所有者。如果可以对多个过滤，则显然必须将选定的存储在数组中。同样也不确定要在哪里清除所有者，但是无论您在何处执行操作，您都还希望清除选定的所有者字符串或数组。
答案 1 :(得分：0)
初始化包含所选所有者名称的类属性
public selectedOwnerName: string = '';
将owner's部分设为
<td>
<span class="badge badge-pill badge-secondary cursor" (click)="selectedOwnerName = campaign?.CampaignName"> {{ campaign?.CampaignName }}
<a *ngIf="selectedOwnerName == campaign?.CampaignName" 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>
</span>
</td>
无需使用filterByOwnr()方法来设置值，您可以在单击时直接将值设置为class属性。在HTML中使用类属性{{selectedOwnerName}}（找到放置此elem的适当位置）以显示所选的所有者。
就显示锚点而言，您可以在anchor标记中进行检查，以查看selectedOwnerName是否与当前for块中的所有者名称匹配。
更新
如果您想在点击锚点时重置列表，则可能要停止event传播，以使事件不会再次上升到span。
<td>
<span class="badge badge-pill badge-secondary cursor" (click)="selectedOwnerName = campaign?.CampaignName"> {{ campaign?.CampaignName }} </span>
<a *ngIf="selectedOwnerName == campaign?.CampaignName" (click)="selectedOwnerName=""; $event.stopPropagation()" 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>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？