在 HTML 页面中绑定来自组件的数据:Angular 6 [英] binding the data from component in HTML page : Angular 6

问题描述

我是 angular 6 的新手，所以拜托了.我有我的 component.ts，我在那里有我的回应.现在我想根据 HTML 页面中的过滤器值绑定数据.即当用户点击所有者名称时.现在我想在我的 HTML 页面的右上角显示所有者名称.我怎样才能做到这一点?

这是我的 HTML 页面的样子.

我的 component.ts 页面如下所示:

import { CampaignService } from './../../../services/campaign.service';import { Component, OnInit, Input } from '@angular/core';@成分({选择器:'家'，templateUrl: './home.component.html',styleUrls: ['./home.component.css']})导出类 HomeComponent 实现 OnInit {构造函数(私人活动服务:活动服务){}时间:任意；活动:任何；筛选;显示:布尔=假；ngOnInit(){setInterval(() => {this.Time = Date.now()}, 1000);this.campaignService.CampaignsInfo().订阅(响应=>{this.show = false;this.campaigns = 响应；});}filterByOwnr(val){if(val != null){this.show=true;}别的{this.show=false;}this.filter = val;}}

我的 HTML 页面如下所示:

<campaign-header></campaign-header><div class="container-fluid date-time sticky-top"><div class="容器"><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>{{时间 |日期}} &nbsp;<i class="zmdi zmdi-time zmdi-hc-fw"></i>{{ 时间 |日期:'mediumTime' }} </span>

<br><!-- 内容--><div class="容器"><h3>活动</h3><div class="clearfix"></div><div class="row"><div class="col-sm-12"><div class="卡片活动边框-顶部包装 mt-4"><br><div class="card-body table-responsive"><table class="table table-hover mb-0"><头><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">所有者</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><tr *ngFor="让竞选活动?.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>

</td><td><span class="徽章徽章-药丸徽章-二级光标"(点击)="filterByOwnr(campaign.CampaignName)">{{ campaign.CampaignName }} &nbsp;&nbsp;</span><a (click)="filterByOwnr()" *ngIf=show style="position: relative; left: -16px; top: -1px; color: #fff; font-size: 8px; border: 1px solid #fff; 边框半径:15px; 字体粗细:粗体; 光标:指针; "><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>