li标签的动态绑定 - Angular5

Question

我正尝试使用<li>

设计的下拉菜单在角度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>

这是组件（措辞缩短）

    //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);
            });
    }
}