绑定HTML页面中组件的数据:Angular 6 [英] binding the data from component in HTML page : Angular 6
本文介绍了绑定HTML页面中组件的数据:Angular 6的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是6号角的新手，所以请.我有我的component.ts我正在回应.现在，我想基于HTML页面中的过滤器值绑定数据.那是当用户单击所有者名称时.现在，我想在HTML页面的右上角显示所有者名称.我该如何实现?
I'm new to angular 6 so please. I have my component.ts where i'm having my response. Now I want to bind data based on filter value in my HTML page. That is when the user clicks on the Owner Name. Now I want to display the owner name on the top right corner of my HTML page. How can I achieve that?
这是我的HTML页面的外观.
Here is how my HTML page looks like.
我的component.ts页面看起来像这样:
My component.ts page looks like this:
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页面如下:
and my HTML page looks like this:
<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>
推荐答案
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>
在这里，我假设您一次只能从看起来像是的代码中筛选一位拥有者.如果可以对多个过滤，则显然必须将选定的存储在数组中.同样也不确定要清除所有者的位置，但是无论您在何处执行清除操作，您都还希望清除选定的所有者字符串或数组.
Here I am assuming you can only filter on one owner at a time, from the code that is what it looks like. If you can filter on multiple you would obviously have to store the selected in an array. Also not sure where you would be clearing the owner, but wherever you do that you then also would want to clear the selected owner string or array.
这篇关于绑定HTML页面中组件的数据:Angular 6的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
