angular 相关问题

错误 TS2322：输入“字符串 |” string[]' 不可分配给类型 'string'

我有一个数据类型为 string | 的 @Input() 属性string[]，在升级到 Angular 16 之前它工作正常，但是在升级到 Angular 16 之后我一直收到此错误。 我不确定...

为什么 BehaviourSubjects 的 `combineLatest` 上的 `.pipe` 未定义？

在 Angular 10 应用程序中，我有一个服务类： @Injectable() 导出类 MyService { 私有只读 bSubject1$:BehaviorSubject = newBehaviourSubject(null);

为什么角度分量字段应该是公共的

这个角度组件在开发模式下运行良好： 这是 html 文件： 这个角度组件在开发模式下运行良好： 这是 html 文件： <form> <select id="id_liste_selectionnee" [(ngModel)]="champ_id_liste_selectionnee" name="zzz"> <option></option> <option *ngFor="let item of donnees" value="{{ item.id_liste }}">{{ item.nom_liste }}</option> </select> </div> </form> 这是打字稿文件的顶部： import { Component } from '@angular/core'; import {Service1} from "../services/service1.service"; import {Liste} from "../models/Liste"; @Component({ selector: 'tagcomposant1', templateUrl: './composant1.component.html' }) export class Composant1Component { private donnees:Liste[]; private champ_id_liste_selectionnee:number|null; .... 但是当我尝试发布时看看这个错误： $ ng build --extract-css "--prod" Property 'donnees' is private and only accessible within class 'Composant1Component'. 如果我将此字段更改为公开：一切正常。我的问题是：为什么我在开发模式下没有错误。该应用程序在我的开发计算机上运行时运行良好。 谢谢 在开发模式下，使用 Angular 的 JIT 编译器：一旦浏览器下载应用程序，它就会将 html 模板转换为 JavaScript 代码。在 JavaScript 中，一切都是公共的，所以你没有问题。 在prod模式下，使用AOT编译器。构建应用程序时，模板将转换为 TypeScript 文件，然后将其与您编写的组件代码一起编译为 JavaScript。 因此 Angular 会为您的模板生成一个 TypeScript 类，它当然需要访问组件中的字段。由于它们是私有的，TypeScript 编译器会抱怨。 AOT 有一天或有一天会成为默认设置，即使在开发过程中也是如此。当这种情况发生时，您会在开发过程中更快地发现此类错误。 这是因为在开发过程中，与生产版本不同，未启用提前编译 (AOT)。 启用 AOT 的服务应该会抛出错误： ng serve --aot 未来开发模式下会默认开启AOT。 如果您使用 Visual Studio Code，则可以安装 Angular Language Service 扩展，其功能之一是检查 AOT 错误。

如何使用汽车数据库坐标在网络浏览器中创建实时交通模拟

我正在开发一个项目，需要在网络浏览器中可视化实时流量。我有一个包含不断更新的汽车坐标的数据库。我想创建一个模拟......

如何在基于 Linux 的 Azure 应用服务上运行 Angular 网站

我正在尝试在基于 Linux 的 Azure 应用服务上运行开箱即用的 Angular 网站。虽然基础 Angular 网站可以作为静态网站运行，但我不打算为未来进行定制...

Transloco 翻译第一次不起作用

这是我的 Transloco 配置： @Injectable({providIn: 'root' }) 导出类 TranslocoHttpLoader 实现 TranslocoLoader { 构造函数（私有http：HttpClient）{} getTranslation(lang: str...

Transloco 无法在我的 Angular 12 Prod 版本中工作，但它可以在我的 DEV 版本中工作。我可能会错过什么？

当我使用 npm start 在本地运行 Angular 12 应用程序时，Transloco 翻译工作正常。 但是，在 ng build --configuration 生成之后，当我使用 http-server 运行我的应用程序时......

如何使用 SignalR 在 ASP .NET Core Web Api 中获取用户 2 连接 ID

我希望用户 1 向用户 2 发送消息，但要做到这一点，我必须获取用户 2 连接 ID 因此，当我每次尝试发送消息时，它都会获取用户 1 连接 ID 并将其添加到此代码中 公共...

为什么应用程序渲染在服务器端，而组件却在客户端？

我的文件夹结构 我不明白为什么渲染在服务器端，但组件放置在客户端，因为构建后我看到组件位于浏览器文件夹中。我是吗

如何修改包含数组的BehaviorSubject而不分配整个数组？

我知道，如果我想向数组BehaviorSubject 添加一个项目，我需要使用 next() 分配整个数组的副本以及新项目。 但是，我想将项目推入这个数组......

从嵌套组件导航到命名路由器中的顶级路由

我有这样的布局： ... 我有这样的布局： <div> <router-outlet /> <div class="details"> <router-outlet name="details"></router-outlet> </div> </div> 在路线中，在顶层，我有： routes = [ { path: 'some-component', component: SomeComponent, }, { path: 'my-details', component: DetailsComponent, outlet: 'details' } ] 现在，当我导航到“某些组件”路线时，我的模板中有一个 [routerLink]。我希望该路由器链接能够触发 details 路由器插座内的“我的详细信息”路由。 我有： [routerLink]="[{outlets:{details:['my-details']}}]" 但是点击它并不会拾取路线。它说找不到（我有一条路线可以拾取所有不匹配的路线）。 当主路由器出口内渲染的组件与主路由器处于同一级别时，似乎无法触发指定路由器中的路由。 我尝试将 [relativeTo]="route.parent" 放入 routerLink 但仍然不起作用。 我错过了什么？ PS。 如果我将命名路由器放入 SomeComponent 并使命名路由成为主路由的子路由，那么它就可以工作。但这不是我想要的。 相信问题是您没有提供 [routerLink] 数组中路径的第一个值，默认情况下它将使用当前路由。因此它将 <a> 元素渲染为： <a href="<Domain URL>/some-component/some-component(details:my-details)></a> 由于您的“我的详细信息”路由不是“某些组件”的子路由，因此这将无法匹配任何路由。 您应该在 [routerLink] 的数组的第一个值中提供一个空字符串或“/”。 <a [routerLink]="['', {outlets:{details:['my-details']}}]">Details</a> 这会将 <a> 元素渲染为： <a href="<Domain URL>/some-component(details:my-details)></a> 我相信与 [relativeTo] 也同样有效： <a [routerLink]="[{outlets:{details:['my-details']}}]" [relativeTo]="route.parent">Details</a> 演示@StackBlitz

Angular 11 - 打开新选项卡时出现错误 404

我已将 Angular 11 应用程序托管到远程服务器上的 IIS。 应用程序路由对于我的 3 个路由中的 2 个运行良好。 前两个是从登录页面到“主页”页面以及从“主页...”的路由

Auth0 注销在角度更新后停止工作

以下代码在 Angular 版本 14 上运行得很好。 （我今天更新到了 17，因为我一直遇到依赖问题。） 注销（）：无效{ sessionStorage.clear(); this.auth.logout({

如何将 NgbDatePicker 格式从 YYYY-MM-DD 更改为 MM-DD-YYYY 角度 4？

嗨，我正在使用 ngbDatePicker，我的格式是 YYYY-MM-DD 我正在尝试更改它，但似乎无法将格式更改为 MM/DD/YYYY。 这是我的 html 代码 嗨，我正在使用 ngbDatePicker，我的格式是 YYYY-MM-DD 我正在尝试更改它，但似乎无法将格式更改为 MM/DD/YYYY。 这是我的html代码 <div class="form-group datepicker"> <label for="dob">Date of Birth*</label> <div class="row input-group"> <input ngbDatepicker #d="ngbDatepicker" #dobF="ngModel" class="form-control input-underline input-lg" id="dob" [(ngModel)]="dateOfBirth" placeholder="mm-dd-yyyy" name="dp" [ngClass]="{ invalid: (dobF.value === null || isString(dobF.value) || futureDate) && dobF.touched }" required /> <div class="input-group-append"> <button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button" ></button> </div> </div> <div *ngIf=" (dobF.value === null || isString(dobF.value) || futureDate) && dobF.touched " class="error" > Please enter a valid date of birth. </div> </div> 这是我的ts文件代码 public dateOfBirth: { year: number; month: number; day: number }; public currentDate = moment().format("YYYY-MM-DD"); constructor( private config: NgbDatepickerConfig ) { // customize default values of datepickers used by this component tree const currentDate = new Date(); const day = currentDate.getDate(); const month = currentDate.getMonth() + 1; const year = currentDate.getFullYear(); this.config.minDate = {year: 1900, month: 1, day: 1}; this.config.maxDate = {year, month, day}; this.config.outsideDays = "hidden"; } ngOninit() { this.subscriptions["patient"] = this.store .select("patient") .subscribe(data => { this.patient = Object.assign({}, this.patient, data); const dob = this.patient.Dob ? this.patient.Dob.split("-") : null; dob !== null ? (this.dateOfBirth = { year: Number(dob[0]), month: Number(dob[1]), day: Number(dob[2]) }) : (this.dateOfBirth = null); }); } ngAfterContentChecked() { let currentDateObject = this.currentDate.split("-"); this.dobYear = Number(currentDateObject[0]); this.dobMonth = Number(currentDateObject[1]); this.dobDay = Number(currentDateObject[2]); if (this.dateOfBirth) { this.futureDate = this.dateOfBirth.year > this.dobYear || (this.dateOfBirth.year == this.dobYear && this.dateOfBirth.month > this.dobMonth) || (this.dateOfBirth.year == this.dobYear && this.dateOfBirth.month == this.dobMonth && this.dateOfBirth.day > this.dobDay); } } 我似乎找不到任何帮助来更改格式。 如何将格式从 YYYY/DD/MM 更改为 MM/DD/YYYY。 有什么帮助吗谢谢 您需要扩展 NgbDateParserFormatter 并覆盖默认提供程序： 下面是 dd/mm/yyyy 的示例，您只需更改 parse() 和 format() 函数即可更改为 mm/dd/yyyy。 添加以下类： import { NgbDateParserFormatter, NgbDateStruct } from "@ng-bootstrap/ng-bootstrap"; import { Injectable } from "@angular/core"; @Injectable() export class NgbDateCustomParserFormatter extends NgbDateParserFormatter { parse(value: string): NgbDateStruct { if (value) { const dateParts = value.trim().split("/"); if (dateParts.length === 1 && isNumber(dateParts[0])) { return { day: toInteger(dateParts[0]), month: null, year: null }; } else if (dateParts.length === 2 && isNumber(dateParts[0]) && isNumber(dateParts[1])) { return { day: toInteger(dateParts[0]), month: toInteger(dateParts[1]), year: null }; } else if (dateParts.length === 3 && isNumber(dateParts[0]) && isNumber(dateParts[1]) && isNumber(dateParts[2])) { return { day: toInteger(dateParts[0]), month: toInteger(dateParts[1]), year: toInteger(dateParts[2]) }; } } return null; } format(date: NgbDateStruct): string { return date ? `${isNumber(date.day) ? padNumber(date.day) : ""}/${isNumber(date.month) ? padNumber(date.month) : ""}/${ date.year }` : ""; } } export function toInteger(value: any): number { return parseInt(`${value}`, 10); } export function isNumber(value: any): value is number { return !isNaN(toInteger(value)); } export function padNumber(value: number) { if (isNumber(value)) { return `0${value}`.slice(-2); } else { return ""; } } 修改 app.module.ts 以覆盖默认提供程序： import { NgbDateCustomParserFormatter } from "./YOURPATH/date-formatter.service"; @NgModule({ declarations: [ ... ], imports: [ ... ], providers: [ ... , { provide: NgbDateParserFormatter, useClass: NgbDateCustomParserFormatter } // <-- add this ], bootstrap: [AppComponent] }) export class AppModule {} 如果我想根据布尔变量将日期格式设置为 dd-mm-yyyy 或 dd-mm 该怎么办？我该如何实现这一目标？ 完美的解决方案是更改下面的文件，我已经编辑了代码以在输入字段中获取所需的格式（DD-MM-YYYY）。 ngb-date-parser-formatter.js 从下面的代码中，您将在输入字段中获得DD-MM-YYYY日期格式。 var __extends = (this && this.__extends) || function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; function __() { this.constructor = d; } d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); }; import { padNumber, toInteger, isNumber } from '../util/util'; /** * Abstract type serving as a DI token for the service parsing and formatting dates for the NgbInputDatepicker * directive. A default implementation using the ISO 8601 format is provided, but you can provide another implementation * to use an alternative format. */ var NgbDateParserFormatter = (function () { function NgbDateParserFormatter() { } return NgbDateParserFormatter; }()); export { NgbDateParserFormatter }; var NgbDateISOParserFormatter = (function (_super) { __extends(NgbDateISOParserFormatter, _super); function NgbDateISOParserFormatter() { return _super !== null && _super.apply(this, arguments) || this; } NgbDateISOParserFormatter.prototype.parse = function (value) { if (value) { var dateParts = value.trim().split('-'); if (dateParts.length === 1 && isNumber(dateParts[0])) { return { year: toInteger(dateParts[0]), month: null, day: null }; } else if (dateParts.length === 2 && isNumber(dateParts[0]) && isNumber(dateParts[1])) { return { year: toInteger(dateParts[0]), month: toInteger(dateParts[1]), day: null }; } else if (dateParts.length === 3 && isNumber(dateParts[0]) && isNumber(dateParts[1]) && isNumber(dateParts[2])) { return { year: toInteger(dateParts[0]), month: toInteger(dateParts[1]), day: toInteger(dateParts[2]) }; } } return null; }; NgbDateISOParserFormatter.prototype.format = function (date) { return date ? (isNumber(date.day) ? padNumber(date.day) : '')+"-"+ (isNumber(date.month) ? padNumber(date.month) : '') +"-"+ date.year:''; }; return NgbDateISOParserFormatter; }(NgbDateParserFormatter)); export { NgbDateISOParserFormatter }; //# sourceMappingURL=ngb-date-parser-formatter.js.map

使用 PHP 8.3.4 处理 Laravel 11 中的 CORS 问题

我尝试使用 Composer 在 PHP 8.3.4 的 Laravel 11 上安装 Fruitcake/laravel-cors，但遇到一条错误消息，表明 SSL/TLS 保护需要 OpenSSL 扩展...

Angular 在我们服务时给出构建错误

当我们尝试为角度应用程序提供服务时，它不会编译并给出如图所示的错误。其他团队成员使用相同的 Angular cli 版本，能够正确运行它，没有任何错误。 ...

Typescript - 在执行函数之前等待返回

我试图在响应完成后执行一个函数。如果没有 setTimeout() 我该如何做到这一点？ 我正在上传大文件，如果文件很小，则工作正常，但如果文件很大，则

Angular - 显示标签而不等待其值

我的组件显示用户的属性（姓名、电子邮件......）。 我想显示标签而不等待它们的值。我找到了一个解决方案，但我不喜欢它，因为我重复了 我的组件显示用户的属性（姓名、电子邮件……）。 我想显示标签而不等待它们的值。我找到了一个解决方案，但我不喜欢它，因为我重复<span *ngIf="user">。 通过以下示例我立即显示 name: email: ... 5秒后 name:Nicolas email:[email protected] ... user.component.html： <div> name : <span *ngIf="user">{{ user.name }}</span> <br/> email : <span *ngIf="user">{{ user.email }}</span> <br/> ... </div> 用户.组件.ts export class UserComponent { user?: User; constructor(private userService: UserapiService) { } ngOnInit() { // getUser1() calls an API and lasts 5s for example this.userService.getUser1().subscribe(user1 => this.user = user1); } } 我不想要下面的代码，因为5秒后就会显示完整的内容 <div *ngIf="user"> name : {{ user.name }} <br/> email : {{ user.email }}<br/> ... </div> 无需等待其值即可显示标签的最佳解决方案是什么？ 感谢您的帮助， 尼古拉斯 使用安全导航操作符 (?.)： 此运算符允许您访问可能为 null 或未定义的对象的属性，而不会导致错误。 <div> name: {{ user?.name }} <br/> email: {{ user?.email }} <br/> ... </div>

使用 Angular 作为客户端（前端），使用 Flask 服务器作为后端

我需要创建一个系统，其中包括： 客户端 - 角度应用程序 服务器 - Flask 服务器作为后端，使用一些 python 脚本形成本地系统 我真的不知道如何制作cli...

垫对话框中的 Ngx 材质时间选择器字段问题

我在 mat 对话框内使用 ngx 材质时间选择器字段，并面临数据正确映射到表单组并且打开时钟 v 时时间也正确显示的问题...