Angular 4 - 根据搜索输入滚动到列表中的项目

Question

我可以使用自定义javascript执行此操作但是想知道是否有任何内置于Angular 4中的内容我可以使用。我有一个可以滚动的复选框列表和上面的搜索输入。我希望能够在用户输入搜索输入时跳转到列表中的某个部分。我的HTML：

<!-- Sold To -->
<div class="col-md-12 input-container">
    <div class="checkbox-group">
        <input type="search" placeholder="Jump to Soldto...">
        <div class="checkbox-wrap">
            <mat-checkbox *ngFor="let option of soldToOptions">
                {{ option }}
            </mat-checkbox>
        </div>
    </div>
</div>

我正在为复选框循环的数组的示例列表（此数组中实际上将有大约300个条目）...

soldToOptions = [ 
 '1028341000-MITSUBISHI WONOKE MENTOR-DALLAS',
 '1018551000-ADVANCE STARTER TEST-CINCINNATI',
 '1030591000-AMERICAN JOYRIDE CARTHAGE-SAN FRANCISCO',
 '1023221000-TESTING GENERAL OAKLAND-OAKLAND' 
];

首先，我需要根据字符串的第一部分按字母顺序排序，这些字母是在最初的＆＃39; - ＆＃39;之后。只是想知道Angular 4中是否有内置的东西可以让我将用户的输入字符串与数组中的值相匹配，并跳转到可滚动复选框中的该部分。我严格不想过滤列表，只需移动列表中的正确位置即可。非常感谢任何帮助。

Answer 1

ngx-page-scroll应该能够满足您的需求。您只需要一种动态添加标记的方法来识别生成的每个元素。