标签: angular10

我正在使用实现多列表轮播，"ngx-bootstrap": "6.0.0",但看起来它在angular: 10.0.2. 我也试过了ngx-bootstrap: 6.0.0，也没用

它只显示一张幻灯片 [第一张图片] 和其余图片的占位符。就像如果itemsPerSlide是 3，它只显示 1 个图像和 2 个图像的占位符。

组件代码

@ViewChild(CarouselComponent) myCarousel: CarouselComponent;
  loopcomplete = true;
  slidesChangeMessage;
  itemsPerSlide = 3;
  singleSlideOffset = true;
  noWrap = true;
  activeRange = 0;

  slides = [
    {image: 'assets/slides/1.jpeg'},
    {image: 'assets/slides/2.jpeg'},
    {image: 'assets/slides/3.jpeg'},
    {image: 'assets/slides/4.jpeg'},
    {image: 'assets/slides/5.jpeg'},
    {image: 'assets/slides/6.jpeg'},
    {image: 'assets/slides/7.jpeg'},
    {image: 'assets/slides/8.jpeg'},
    {image: 'assets/slides/9.jpeg'},
    {image: 'assets/slides/10.jpeg'},
    {image: 'assets/slides/11.jpeg'},
    {image: 'assets/slides/12.jpeg'},
  ];

HTML代码

<div>
  <carousel [itemsPerSlide]="itemsPerSlide"
            [singleSlideOffset]="singleSlideOffset"
            [noWrap]="!noWrap"
            [interval]="false"
            [startFromIndex]="0"
            (slideRangeChange)="onSlideRangeChange($event)">
    <slide *ngFor="let …

我尝试\n将十六进制字符串转换为颜色（导入@角材料组件/颜色选择器）\n也不实例化颜色并在我的数据库中设置我的值十六进制库存\n从侧面.ts

<!-- begin snippet: js hide: false console: true babel: false -->

mat-form-field>\n                              <input matInput [ngxMatColorPicker]="picker" formControlName="color" [style.background-color]="getfCAll(ri)"  [disabled]="disabled">\n                              <ngx-mat-color-toggle matSuffix [for]="picker"></ngx-mat-color-toggle>\n                              <ngx-mat-color-picker #picker [touchUi]="touchUi" [color]="color"></ngx-mat-color-picker>\n                            </mat-form-field>

\n

createPriority(p): FormGroup {\n    return this.formBuilder.group({\n      name: [p.name, Validators.compose([Validators.required])],\n      color: [p.color, Validators.compose([Validators.required])]\n    });\n  }\n

createPriority(p): FormGroup {\n    return this.formBuilder.group({\n      name: [p.name, Validators.compose([Validators.required])],\n      color: [p.color, Validators.compose([Validators.required])]\n    });\n  }\n

\n

在 Angular 10 项目中，我有一个表单，其中包含 2 个名为 Username 和 Password 的输入。我cdkFocusInitial在用户名字段上使用 属性，但它不关注页面加载。这是一个 StackBlitz 示例，显示了该问题https://stackblitz.com/edit/angular-4amzj4?file=src%2Fapp%2Ffocus-monitor-directives-example.html

<div class="example-focus-monitor">

    <mat-form-field appearance="fill">
        <mat-label>Username</mat-label>
        <input cdkFocusInitial  aria-label="Username" class="username"
             matInput
            placeholder="Enter Username" type="text">
  </mat-form-field>

        <br/>
        <mat-form-field appearance="fill">
    <mat-label>Password</mat-label>
    <input   aria-label=" Password" class="password"  matInput placeholder="Enter Password"
            type="text">
        </mat-form-field>
</div>


  


  [1]: https://stackblitz.com/edit/angular-4amzj4?file=src%2Fapp%2Ffocus-monitor-directives-example.html

当我尝试这样做时ng build，我收到一条错误消息

ERROR in node_modules/@angular/common/http/http.d.ts:81:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.

This likely means that the library (@angular/common/http) which declares HttpClient has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible …

如何添加字符串插值/连接

到下面的路由器链接，它转到父路由，然后是变量链接？

 <a routerLink="../account-information/" + "item.productId">

我正在 ionic 5 应用程序中测试 fullcalendar/angular 5，视图的标题工具栏显示为两个按钮：

这是我的日历选项：

  calendarOptions: CalendarOptions = {\n    contentHeight: "auto",\n    headerToolbar: {\n      left: \'title\',\n      center: \'timeGridMes, timeGridDia\',\n      right: \'prev,next today\'\n    },\n    initialView: \'timeGridDia\',\n    weekends: true,\n    editable: false,\n    selectable: true,\n    selectMirror: true,\n    dayMaxEvents: true,\n    allDaySlot:false,      \n    initialDate: new Date(),\n    firstDay: 1,\n    fixedWeekCount: false,\n    locale: \'es\',\n    slotMinTime : "08:00:00",\n    slotMaxTime : "23:00:00",\n    navLinks: true,\n    nowIndicator: true,\n    slotDuration: "00:15:00",\n    slotLabelInterval: "00:15:00",\n    eventTimeFormat: { hour12: false, hour: \'2-digit\', minute: \'2-digit\' },\n    showNonCurrentDates: true,\n    timeZone: \'local\',\n    weekNumbers: true,\n    weekText: …

我在组件 HTML 文件中以角度方式使用此代码。但是当 ng 服务时，会显示错误

运算符“>”不能应用于类型“字符串”和“数字”

如何解决这个问题

我的角度 html 代码是

<input type="text" #age (keyup)="0" />

<div *ngIf="age.value>18 ; else elseblock">
    You are elegable for vote
</div>

<ng-template #elseblock>
    <div>You are not elegable for vote</div>
</ng-template>

错误是

错误：src/app/app.component.html:88:17 - 错误 TS2365：运算符“>”无法应用于类型“字符串”和“数字”。

88 <div *ngIf="age.value>18 ; else elseblock"> ~~~~~~~~~~~~

src/app/app.component.ts:9:16 9 templateUrl: './app.component.html', ~~~~~~~~~~~~~~~~~~~~~~ 发生错误在组件 AppComponent 的模板中。

将 Angular 库从 Angular 9 更新到 Angular 10 后，我在构建库时收到以下错误。

ERROR: Symbol MatButton declared in ...........................  is not exported from @angular/material/button. 

我无法理解原因，有人可以建议需要做什么吗？

谢谢，米纳克什

我正在尝试将 API 响应转换为完全不同的 ViewModel，用于多个组件。

a) 一种解决方案是直接在 API 代理中映射/管道数据，但是如果我只想要普通的原始 API 数据，那么 API 代理不是很可重用。

b) 这种模型-适配器模式可能不起作用，因为在示例中，适配器创建了与 API 相同的数据对象类型。https://florimond.dev/blog/articles/2018/09/sumption-apis-in-angular-the-model-adapter-pattern/。我们下面的数据转换器，带来了完全不同的一个。

寻找任何其他好的解决方案。

常规API：

export class ProductService {
  private readonly apiUrl = environment.baseUrl + '/api/CalculateProducts/';
  constructor(private httpClient: HttpClient) { }

  getProductData(
    productValuationDtoRequest: ProductValuationDtoRequest
  ): Observable<ProductValuationResponse>  {
    return this.httpClient.request<ProductValuationResponse>('post', this.apiUrl,
      {body: productValuationDtoRequest}
    );
  }
}

数据转换器：

export class CalculateProductModelService {
  constructor() { }

  convertData(
    productValuationResponse: ProductValuationResponse): CalculateCostModel  {

    const calculateProductModel: CalculateProductModel = {
      valuationAttribute: productValuationResponse?.productValuationDetail[0]?.productValuationAttribute?.description,
      livingAreaQuantity: productValuationResponse?.productValuationDetail[0]?.quantity,
      livingAreaRate: productValuationResponse?.productValuationDetail[0]?.improvementUnitValue * 1.03,
      livingAreaValue: productValuationResponse?.productValuationDetail[0]?.attributeTotalImprovementValue,
      numberOfUnits: productValuationResponse?.numberOfUnits …

我正在尝试设计一个登录表单。我采用的模型中的两个属性，在 html 文件中的用户名和密码输入字段中使用了两种方式绑定，并尝试匹配用户给出的输入，以根据我在组件文件中编写的一些硬编码用户名/密码进行身份验证。但不确定为什么我会收到错误：

Failed to compile.

src/app/login/login.component.html:10:102 - error TS2322: Type 'Event' is not assignable to type 'string'.

10                                 <input type="text" class="form-control" name="username" [(ngModel)]="login.userName" #username="ngModel" required>
                                                                                                        ~~~~~~~~~~~~~~~~~~~~~

  src/app/login/login.component.ts:7:16
    7   templateUrl: './login.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component LoginComponent.

有人可以帮忙吗！

登录.组件.ts

import { Component, OnInit } from '@angular/core';
import {Router} from '@angular/router';
import {Login} from './login.model';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ["./login.component.css","../app.component.css"]
})
export class LoginComponent implements OnInit {

  login=new Login();
  
  constructor(private _router: Router) { }

  users: any[]=[ …

我在项目中遇到了一个问题， *ngFor 无法在模态组件内工作，而可以在其他任何地方工作。我在应用程序组件中导入 BrowserModule，在其他地方导入 commonModule。没有拼写错误。我确信该声明已明确声明。

错误是：

无法绑定到“ngForOf”，因为它不是“li”的已知属性

有什么帮助吗？