Angular 4:存储管道输出变量以在模板外部使用

2024-04-02

我知道我可以在 Angular 4 中对管道输出进行别名,但这仅在别名的模板内有用。

Example

<div *ngIf="race | async as raceModel">
    <h2>{{ raceModel.name }}</h2>
    <small>{{ raceModel.date }}</small>
</div>

这里raceModel不能在ngIf之外引用。就我而言,我正在使用管道订购和过滤集合,并希望在过滤后获取返回集合的长度,以便我可以更新我的 NgbPagination。

我的代码:

<tr *ngFor="let cust of customers | filterBy: searchFilters: true | orderBy: order: reverse: true: start: end as collection">
                        <td>{{cust.id}}</td>
                    </tr>
                    </tbody>
                </table>
                <ngb-pagination *ngIf="customers"
                                (pageChange)="pageChange($event)"
                                [collectionSize]="collection.length"
                                [(page)]="page"
                                [(pageSize)]="pageSize"
                                [maxSize]="5"
                                [rotate]="true"
                                [ellipses]="true"
                                [boundaryLinks]="true">
                </ngb-pagination>

如果可以避免的话,我不想将管道拖到视图模型中。有关如何保护管道中的变量以便以后在视图中使用的任何提示?


目前我已采取以下措施:

<ngb-pagination *ngIf="customers"
 (pageChange)="pageChange($event)"
 [collectionSize]="(customers | filterBy: searchFilters: true: true)"
 [(page)]="page"
 [(pageSize)]="pageSize"
 [maxSize]="5"
 [rotate]="true"
 [ellipses]="true"
 [boundaryLinks]="true">
</ngb-pagination>

其中过滤器管道的第二个 true 参数返回过滤后的数组的长度而不是过滤后的数组本身。哈克但工作得很好。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular 4:存储管道输出变量以在模板外部使用 的相关文章

  • Angular 中的动态子组件

    我正在构建一个具有一致的元素列表设计模式的应用程序 如果我有一个 A 类型的对象 我会创建AComponent它接受a作为输入 然后创建另一个组件来迭代 A 列表 AListComponent 那么如果我有一个对象 B 我需要做同样的事情
  • 角度错误:冲突:多个资源向同一文件名 file.svg 发出不同的内容

    我有这个css in my component scss file bg background url assets images file svg center center no repeat 并且该路径中只有一个 svg 文件 因此每
  • 从相机拍照后图像未刷新

    我将这个简单的代码与 ionic 2 一起使用
  • Angular 拦截器排除特定 url

    我正在编写拦截器 这样我就不必处理调用我的 Web api 的每个服务中的标头 问题在于 我的 99 的调用需要 1 个特定的标头集 但其他 1 只需要 1 个标头 并且无法与其他存在的标头一起使用 知道这一点后 我的想法是制作 2 个拦截
  • 无法使用 API 获取的数据初始化 ngx-charts

    我在尝试初始化使用构建的图表时遇到了一些困难ngx 图表 https github com swimlane ngx charts使用API 获取数据 我构建了一个 REST API 在正确调用后 它会输出一些时间序列数据 prices i
  • 在 Angular 中包含共享资产

    我创建了一个有角度的工作区 其中托管多个有角度的项目和库 在工作区中 我有一个共享库 其中包含所有资产 图像和徽标 assets projects xxx workspace src favicon ico projects xxx wor
  • 为什么我无法在 angular2 中导入 lodash

    我在 Angular2 rc1 中使用 Angular CLI 进行开发 我已经通过 npm 安装了 lodash node module 并使用以下命令在 systemjs 中配置了它 系统配置 ts User Configuration
  • Angular 6+ 应用程序的运行时配置

    在 Angular 应用程序运行时加载环境特定配置的推荐最佳实践是什么 Angular 文档提到了 APP INITIALIZER 的使用 但对于使用 forRoot 约定的导入模块的运行时配置等加载过程来说 这仍然还不够早 在我的用例中
  • 如何将 Bokeh 与 Angular 4 集成?

    我在后端生成了散景图 我想将其嵌入到已经存在的 Angular 4 Web 应用程序中 目前我使用了 bokeh components 函数 它生成以下两个 html 标签
  • 无法使用 angularfire2 访问 Angular 6 应用程序中的多个 Google Firestore DB

    我尝试通过 angularfire2 包从我的 Angular 6 应用程序访问多个 Google Firestore DB 我在 app module ts 中初始化了 AngularFireModule 的多个实例 但找不到访问这两个数
  • 在线性垫水平步进器中使用单独的组件

    在 Angular 中 是否可以有一个线性步进器 其中各个步骤是单独的组件 例如
  • 从 Angular 2.2.3 升级到 2.4.0

    我刚刚使用以下命令将我的 Angular 项目从 Angular 2 2 3 升级到 2 4 0npm 检查更新 https www npmjs com package npm check updates 使用 angular cli 编译
  • 如何对这种效果进行单元测试(使用 {dispatch: false})?

    ngrx 和单元测试初学者在这里 我有如下效果 Injectable export class NotificationEffects Effect dispatch false notificationShow this actions
  • Angular2 CORS 问题

    我是 angular2 的新手 公平地说 我对尝试修复的知识知之甚少 但是我遇到了一些有关跨站点请求的问题 试图从另一个应用程序访问服务 但无论我尝试什么 我都会遇到这个问题去做 XMLHttpRequest cannot load htt
  • 数字管小数点后 0 或 2 位

    我想实现数字格式 如果数字是整数 则不应有小数占位符 00否则使用 2 位且仅使用 2 位小数 例如 1 23 gt 1 23 1 23456 gt 1 24 1 2 gt 1 20 1 0 gt 1 1 gt 1 根据文档 您只能指定小数
  • 在 Angular 2+ 中进行 DOM 操作的正确方法

    我知道有一些类似的问题 但没有人回答我的问题 基本上 以角度方式操作 DOM 的正确方法是什么 比如说我有这个 html
  • 添加滚动到顶部按钮(Ionic 2 | Typescript)

    大家好 我正在尝试添加 滚动到顶部按钮 实现以下内容 1 当用户向下滚动时显示按钮 2 当用户向上滚动时隐藏按钮 3 如果点击该按钮 则滚动到顶部并隐藏该按钮 关于如何使其正确的任何建议 多谢 简化scrollToTop from adri
  • 在 httpInterceptor 中过滤请求 - Angular 4.3+

    我有一个身份验证拦截器 但是 我希望此拦截器能够过滤请求 并且当用户访问不需要用户身份验证的组件 例如确认帐户密码等 时不应用该拦截器 有关于如何进行的示例吗 这是 auth 拦截器的逻辑 intercept request HttpReq
  • Rxjs 带延迟功能的重试

    我正在尝试使用retry with delay函数 我预计函数会在 1000 毫秒延迟后调用 但事实并非如此 这里可能会出现什么错误 查看控制台输出 同一时间 16 22 48 我预计有 16 22 48 16 22 59 canCreat
  • Angular:如何检测 ng-bootstrap 下拉列表中的切换状态(其中有多个下拉列表)

    我最近问这个问题 https stackoverflow com questions 56473532 angular how to detect toggle status in ng bootstrap dropdown 5647508

随机推荐