天道酬勤,学无止境

angular

在带有 Node 14 运行时的 Azure 应用服务上找不到 pm2(pm2 not found on Azure App service with Node 14 runtime)

问题 我想要实现的是使用 Linux 操作系统将 Angular 9 应用程序部署到 Azure 应用程序服务(Windows 不适合我,因为 Linux 更便宜)我使用 Node 14 运行时创建了 Linux Web 应用程序。 部署应用程序后,我会看到 Azure 默认网页。 我试图解决这个问题,因为它是在这里描述的 我在带有 Node 14 运行时的 Linux Web 应用程序上执行的步骤: 我加了这个 pm2 服务 /home/site/wwwroot --no-daemon --spa 到 AppService->Configuration->General Settings->Startup Command 已保存配置并重新启动应用服务但出现 pm2 not found 错误。 使用 ssh 连接到网络应用程序并运行 npm 安装 pm2 -g 重新启动应用服务,但仍然找不到 pm2。 问题是如何使用 Node 14 在 Linux 应用服务上托管 Angular 9? 我应该修复未找到的 pm2 还是我可以使用其他方法(但仍然使用 Linux 操作系统)来解决这个问题? 回答1 最新 如果你不关心发布方式,建议你在本地执行ng build,然后将<your project name>文件夹中的所有文件直接拖放到wwwroot,或者使用FTP上传。 然后用npx

2021-12-07 03:16:02    分类:技术分享    angular   linux   azure   azure-web-app-service   pm2

查找并替换打字稿角度(find and replace typescript angular)

问题 我使用一个下拉列表,当一个值被选中时,它会作为一个单词出现在内容编辑器上。我试图从内容编辑器中查找和替换单词。 我能够更换,但在某些情况下它不起作用。 我正在尝试将城市替换为 Newyork 例如,如果我在控制台日志中选择城市,则从下拉值中内容编辑器内容将其显示为 Newyork 所以起初它有效,但如果我选择其他下拉值,当我再次选择城市时,它不起作用 例如,尝试选择 City first Name second 和 City again 你会看到当你第二次选择 city 时,city 的控制台日志值没有改变为 Newyork 如果你们知道,请帮忙 changeValue() 是函数名 Stackblitz:https://stackblitz.com/edit/angular-summernote-demo-ej4xpg?file=src%2Fapp%2Fapp.component.ts 回答1 我做了一些事情(但不确定为什么要使用正则表达式她)现在它按您的预期工作。 changeValue(ev) { const regex = /(<\/p>)$/gm; if (regex.test(this.textValue)) { this.textValue = this.textValue.replace(regex, ""); this.textValue += ` ${ev

2021-12-07 03:03:36    分类:技术分享    javascript   html   angular   typescript   summernote

预期操作数为字符串或数字类型(Expected operands to be a string or number type)

问题 我有这个角度为 2 的代码: <tbody> <tr *ngFor="let item of vehicleHistoryList | slice: (page-1) * pageSize : page * pageSize"> <th scope="row">{{item.plateNumber}}</th> <td>{{item.entryPlaza}}</td> <td>{{item.entryLane}}</td> <td>{{item.entryDtime}}</td> <td>{{item.exitPlaza}}</td> <td>{{item.exitDtime}}</td> <!-- 'data:image/jpg;base64,' --> <td> <img [src]="this._sanitizer.bypassSecurityTrustResourceUrl('data:image/jpg;base64,' + item.img)" /> // ====> THIS IS WHERE I GET THE ERROR </td> <td> <button class="btn btn-sm btn-outline-success btn-round btn-icon" > <i class="nc-icon nc-send"></i> </button>

2021-12-07 02:53:30    分类:技术分享    angular

根据 if 条件将 enableCheckboxSelector 设置为 false(Set enableCheckboxSelector to false based on if condition)

问题 我正在使用 angular slickgrid & 默认情况下,我在网格选项中将 enableCheckboxSelector 设置为 true。 但是基于下拉列表中的值更改,我想隐藏所有行的复选框,所以我写了 `if(isReadOnly){ this.gridOptions.enableCheckboxSelector = false; } else{ this.gridOptions.enableCheckboxSelector = true; }` 但它没有按预期工作。 谁能帮我解决这个问题。 谢谢。 回答1 您误解了这是如何工作的, enableCheckboxSelector网格选项是显示(或不显示)行选择列。 如果您将该选项设置为false ,那么您将摆脱整个列(这根本不是您想要的)。 您需要的是selectableOverride ,它显示在此行选择 - Wiki 中。 Wiki 上有大量信息供您阅读。 this.gridOptions = { enableRowSelection: true, enableCheckboxSelector: true, checkboxSelector: { // you can override the logic for showing (or not) the expand icon // for example

2021-12-07 02:51:43    分类:技术分享    angular   angular-slickgrid

跨域资源共享错误 (CORS) Angular 10(Cross-Origin Resource Sharing Error (CORS) Angular 10)

问题 我使用 Angular 10(前端)和 Node.js(后端)制作了 Web 应用程序。 但是当我通过添加标题发送请求时,它不起作用。 (它在关闭 CORS 并在 Chrome 上发送请求时起作用)我发现在 StackOverflow 上缺少一些类似的答案,但不幸的是,这些对我不起作用:| 我发送了一个请求如下, getAllSubmissions() { let token = sessionStorage.getItem('auth-token'); let path = this.globe.base_path + 'get-submissions'; this.http.get<any>(path, {headers:{'Access-Control-Allow-Origin':'*', 'auth-token':token}}).toPromise().then(data => { this.allsubmissoinsFiltered = data.filter(sub => sub.status != 'active') this.allSubmissionsCount = this.allsubmissoinsFiltered.length; }).catch(err => { console.log(err) }) } 以及,我也在尝试以下代码,

2021-12-06 23:05:35    分类:技术分享    angular   cors   http-headers

如何使用 BehaviourSubject 设置传递数据到另一个模块组件(How to set pass data to another module component using BehaviourSubject)

问题 我在我的项目中多次使用以下方法,以便将数据从一个组件传递到另一个组件。 但是,这次我有 2 个组件:父组件(在 AppModule 中)和侧边栏(在 CoreModule 中)组件,我试图在下拉更改时将数据从父级传递到侧边栏。 但是,它不起作用并且侧边栏组件(在示例子组件中)上的subscribe方法不会被触发,除非是从初始加载。 在不同的模块上会导致这个问题吗? 或者任何其他问题? 这是演示。 更新: 这是我的模块关系: 父模块: imports: [ SharedModule ], providers: [] 子模块: imports: [ SharedModule ], providers: [] 共享模块: providers: [ DataService ] 当我如上所示更新时,它仍然不起作用。 但是,如果我将提供者字段中的DataService从shared.module到app.module它可以工作。 但我认为它应该只在shared.module工作,如上所示。 为什么? 回答1 我相信这个问题与每个模块中的提供者实例有关,您是否尝试过仅向顶级父模块添加 1 个提供者并查看结果? 使用来自其他模块的组件与服务 使用另一个模块的组件和使用来自另一个模块的服务之间存在重要区别。 当您想要使用指令、管道和组件时导入模块。

2021-12-06 23:00:10    分类:技术分享    javascript   angular   typescript   rxjs   observable

Angular“InvalidPipeArgument: Missing locale data”在使用 optimization=true 构建或服务时(--prod 选项)(Angular "InvalidPipeArgument: Missing locale data" when build or serve with optimization=true (--prod option))

问题 初始上下文 我用法语构建了一个 Angular 应用程序。 我使用本地日期管道| date | date和@danielmoncada/angular-datetime-picker组件( @danielmoncada/angular-datetime-picker )。 我想以法语风格显示日期,并且 datepicker 组件以法语本地化(月份名称,...) 代码示例: <p>raw: {{today}}</p> <p>date pipe: {{today | date}}</p> <p>date pipe 'dd/MM/yyyy': {{today | date:'dd/MM/yyyy'}}</p> <p> date picker: <input [owlDateTime]="dt1" [owlDateTimeTrigger]="dt1" placeholder="Date Time"> <owl-date-time [firstDayOfWeek]="1" [pickerType]="'calendar'" #dt1></owl-date-time> </p> 未设置任何语言环境的结果 正如预期的那样,这是英文的。 添加一些法语本地化 现在,我按照我对 angular 本地化的理解,在我的 AppModule 中使用registerLocaleData导入法语语言环境

2021-12-06 22:58:28    分类:技术分享    angular   date   localization   locale

Rxjs:基于条件的递归 Http 调用 [关闭](Rxjs: Recursive Http calls based on condition [closed])

问题 关闭。 这个问题需要细节或清晰。 它目前不接受答案。 想改善这个问题吗? 通过编辑此帖子添加详细信息并澄清问题。 10 个月前关闭。 改进这个问题 我通过提供固定数量的记录使用以下命令检索列表。 在以下示例中,它返回 100 条记录(我传递了pageIndex值,并且应该在每个请求中增加它以获得下一个 100 条记录): this.employeeService.list(1, 100).toPromise().then(data => { this.employees = data.items; }); 数据中有一个名为isComplete的标志,如果data.isComplete值为false ,我想对相同的列表方法进行相同的Http调用。 在Angular使用Rxjs执行此操作的正确方法是什么? 有一些方法,例如递归订阅等,但似乎不适合这种情况。 回答1 一个可能的解决方案: 你可能想要扩大和减少: 我假设页面索引从 0 开始,您在“扩展”之前开始的页面索引必须比您的服务的第一页索引小 1。 of({ isComplete: false, pageIndex: -1, items: [] }).pipe( expand(data => this.employeeService.list(data.pageIndex+1, 100).pipe( map(newData =

2021-12-06 21:49:19    分类:技术分享    javascript   angular   typescript   rxjs   observable

我怎样才能对分数进行另一个过滤器来显示与范围匹配的结果?(How can I another filter for score which will show the results matching the range?)

问题 我想为分数添加另一个过滤器,其选项为非常高、高、中和低。 如果分数 <20 表示低,21-50 表示中等,51-70 表示高,>71 表示非常高,它应该过滤匹配该范围的记录。 你能指导我在过滤器中更新什么吗? 过滤管 import { Pipe, PipeTransform } from "@angular/core"; @Pipe({ name: "tableFilter" }) export class TableFilterPipe implements PipeTransform { transform(list: any[], filters: any) { const keys = Object.keys(filters).filter(key => filters[key]); const filterUser = (user: { [x: string]: any }) => keys.every(key => { if (key == "sdob") { return ( new Date(user["dob"]) >= new Date(new Date(filters[key]).setHours(0, 0, 0, 0)) ); } else if (key == "edob") { return ( new Date(new Date(filters

2021-12-06 20:17:34    分类:技术分享    javascript   angular   typescript   filter   pipe

从父组件模态确定按钮以角度提交子组件[重复](Submit child component from parent component modal ok button in angular [duplicate])

问题 这个问题在这里已经有了答案: 如何将数据从角度材质对话框传递到父组件? (4 个回答) 11 个月前关闭。 我是角度的新手。 我必须有两个组件,一个是父组件,另一个是子组件。 父组件有一个 Modal。 子组件是在父组件的 Modal 中打开的表单。 现在我想知道如何在单击父组件 Modal 的 OK 按钮时提交子组件表单。 回答1 每次你想从父组件处理子组件中的动作时,比如提交,你有两种选择,一种是创建服务并订阅 actionStatus 属性 export class CtrlActionService { private actionStatus = new Subject<any>(); constructor() {} //ctrl submit action public callAction() { this.actionStatus.next(true); } public getAction(): Observable<boolean> { return this.actionStatus.asObservable(); } } 父组件.ts onClickOkButton() { this.ctrlActionService.callAction() } 子组件.ts ngOnInit() { this.ctrlActionService

2021-12-06 17:17:54    分类:技术分享    angular   bootstrap-modal   angular-components