li-tag-Angular5的动态绑定

我正在尝试在angular 4中使用使用

我使用了一个组件引用变量promoList，它订阅了一个服务（它将从中获取的字符串与从主题订阅中再次获取的完整列表进行比较）。该服务返回正确的输出，正如我通过日志记录看到的那样。该组件还在每次订阅后填充promoList变量，但promoList更改不会反映在模板中。你能帮我吗

这是我的HTML模板

<div class="searchDiv">
    <span class="glyphicon glyphicon-search" id="searchSpan" (click)="searchEvent($event)"></span>
    <input type="text" placeholder="search" id="searchInput" class="" list="promotionsSearchList"
            (keyup)="searchEvent($event)" [(ngModel)]="searchModel" />

    <ng-container *ngIf="loadDropDown">
        <ul  class="initialDisplayClass">
            <li *ngFor="let pp of promoList" (click)="selectAnyItem($event)" 
                        class="initialDisplayClass">
                {{pp.name}}
            </li>
        </ul>
    </ng-container>
</div>

{{pp.name}}

这是组件（缩写为verbiage）

//此处是导入状态
@组成部分({
选择器：“应用程序标题”，
templateUrl:'./header.component.html'，
样式URL:['./header.component.css']
})
导出类HeaderComponent在Init上实现{
文本输入：字符串；
searchInputArray:字符串[]；
搜索模型：字符串；
搜索结果：促销[]；
//来自表单控件的已订阅查询参数
queryParam：字符串；
loadDropDown:boolean；//在加载屏幕时，该值最初设置为false
促销员：促销[]；
subsc：订阅；
构造函数（专用路由图：路由器，
私人搜索服务：搜索服务，
专用子服务：SubjectPromotionService，
私有searchFilterService:searchFilterService，
私有激活路由：激活路由，
专用缓冲服务：缓冲服务）{
this.searchInputArray=新数组（）；
this.loadDropDown=false；
}
恩戈尼尼特（）{
this.searchFilterService.getQueryParamObservable（）.subscribe（queryparam=>{
log（'ngOnit（）query param'，queryparam）；
this.subService.getSearchResults（queryparam）；
});
}
searchEvent（事件：事件）{
//输入3个字符后尝试加载li
if（this.searchModel！==undefined&&this.searchModel！==null&&this.searchModel.length>3）{
this.loadDropDown=true；
this.searchInputArray.push（this.searchModel）；
console.log（'所有查询参数'，
this.searchInputArray[this.searchInputArray.length-1]）；
this.searchFilterService.setQueryParamSubject（this.searchInputArray[this.searchInputArray.length-1]）；
}否则{
this.loadDropDown=false；
console.log（'如果长度小于3，则设置为空'）；
this.searchFilterService.setQueryParamSubject（“”）；
}
this.searchFilterService.GetResultsObjectObservable（）.subscribe（searchResults=>{
log（'ngOnit（）订阅结果'，搜索结果）；
this.promoList=搜索结果；
log（'inside subsc promolist-HEADER'，this.promolist）；
});
}
}

此功能是否正常运行

searchEvent

可以在stackbizSure提供代码，但代码是使用angular cli在本地开发的。不确定stackblitz中的依赖项是否需要使用所有这些（因为我是新手）：（@joey 587当您使用

console.log（this.promoList）

时，是否在日志中获得更新的列表？@Anshuman-是。这是在组件中以及在订阅块中使用时得到的

    //import statments goes here
@Component({
    selector: 'app-header',
    templateUrl: './header.component.html',
    styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
    textInput: string;
    searchInputArray: string[];
    searchModel: string;
    searchResults : Promotion[];
    // subscribed query param from form control
    queryParam: string;
    loadDropDown: boolean; // initially this value is set as false at the time of loading the screen
    promoList : Promotion[]; 
    subsc: Subscription; 

    constructor(private routeConfig: Router, 
                private searchService: SearchService, 
                private subService: SubjectPromoService,
                private searchFilterService : SearchFilterService, 
                private  activatedRoute: ActivatedRoute,
                private bufferService: BufferService) {
        this.searchInputArray = new Array<string>();
        this.loadDropDown = false;
    }

    ngOnInit() {
        this.searchFilterService.getQueryParamObservable().subscribe(queryparam => {
            console.log('ngOnit() query param', queryparam);
            this.subService.getSearchResults(queryparam);
        });
    }

    searchEvent(event: Event) {
        // try loading the li after 3 characters are entered

        if (this.searchModel !== undefined && this.searchModel !== null &&  this.searchModel.length > 3){
            this.loadDropDown = true;

            this.searchInputArray.push(this.searchModel);
            console.log('all QUERY PARAMS', 
            this.searchInputArray[this.searchInputArray.length - 1]);
            this.searchFilterService.setQueryParamSubject(this.searchInputArray[this.searchInputArray.length - 1]);
        } else {
            this.loadDropDown = false;
            console.log('setting to empty if length is less than 3');
            this.searchFilterService.setQueryParamSubject('');
        }


        this.searchFilterService.getResultSubjectObservable().subscribe(searchResults => {
                console.log('ngOnit() subscribed result', searchResults);
                this.promoList = searchResults;
                console.log('inside subsc promolist - HEADER', this.promoList);
            });
    }
}