Динамическое связывание тега li - Angular5 - PullRequest
Новая
       7

Динамическое связывание тега li - Angular5

0 голосов
/ 08 июня 2018

Я пытаюсь реализовать функцию поиска в angular 4 с раскрывающимися списками, разработанными с использованием <li>

. Я использую переменную ссылки на компонент - 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);
            });
    }
}
...