标签: angular8

"@angular/core": "~8.0.0",

带有 scss 样式选项的脚手架 angular 8 项目

我在组件 scss 文件中有如下所述的代码

背景： url("/assets/images/vector-icon.png") 不重复 25%；

在最终构建时使用命令

ng build --prod --base-href="/website/" --deploy-url="/website/"

将 build 放在子文件夹 root/webside

除了背景图像路径外，一切正常

我已经尝试过 ip/website/assets/images/vector-icon.png 那时我能够获得图像。

如果我不想更改每个 css 文件的路径怎么办。

任何帮助，将不胜感激。提前致谢

我正在尝试ngIf使用async管道来实现。但不起作用。有人帮我吗？

这是我的 html：

<div class="response-container">
    xx {{response | async | json }}
    <div class="failed-error" *ngIf="(response.responseFail | async )">
        {{response.message}}
    </div>
    <div class="success-msg" *ngIf="(response.responseSucc | async) === 'true' ">
        {{response.message}}
    </div>
</div>

在上面xx {{response | async | json }}它打印为：

xx { "responseFail": false, "responseSucc": true, "message": "success" }

但是为什么这不适用于*ngIf条件？

将ng build --prodangularcli 更新到版本 8 后运行命令不会在 dist 文件夹中生成 index.html。

我有一个像 54781.7622000 、 1123.11 这样的值。我希望这个值的格式为 $54781.76 , $1123.11 。

//import currency pipe
import { CurrencyPipe } from '@angular/common'

//initialize  in constructor
constructor(private cp: CurrencyPipe)

this.formatedOutputValue = this.cp.transform(parseInt(this.outputValue));

我已经尝试过在这个值之后对额外的参数进行求和。

this.formatedOutputValue = this.cp.transform(parseInt(this.outputValue),1.2-2);

但是不锻炼。

这是我的 html：

<ng-container *ngIf="col.data !== ''">
    <ng-template [ngSwitch]="col.data">
        <ng-container *ngSwitchCase="'Page'">
            <div>{{getData(data, col.data, col.dataName)}}</div>
        </ng-container>
        <ng-container *ngSwitchDefault>
            {{getData(data, col.data, col.dataName)}}
        </ng-container>
    </ng-template>
</ng-container>

当我使用上面的方法实现 switchCase 时，得到如下错误：

No provider for NgSwitch ("<ng-template [ngSwitch]="col.data"> [ERROR ->]<ng-container *ngSwitchCase="'Page'">

像上面一样。在我使用 ngswich 之前，它运行良好。我也已经导入了通用模块..

有人帮我解决这个问题吗？

我在 Angular 中有一个小组件，它有一个方法（目前）设置超时并更改变量的值。

import { Component, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'my-component',
  templateUrl: './my-view.html',
  styleUrls: ['./my-view.scss'],
  changeDetection: ChangeDetectionStrategy.Default
})
export class MyComponent {

  status: boolean = false;

  changeStatus(): void {

    setTimeout(() => {
      this.status = true;
    }, 1500);
  }
}

和 HTML

<div>
  <form #myForm="ngForm">
    <input name="code" type="text" class="form-control" [(ngModel)]="code" #codeInput="ngModel" required placeholder="Enter your code" />
  </form>
</div>

<div class="row">
  <div class="col-md-5" (click)="changeStatus()">
    <mat-icon aria-label="clear-all" *ngIf="!status">&#xe042;</mat-icon>
    <a>Change status</a>
  </div>
  <div class="col-md-7">
    <button type="button" class="btn-flat app-btn-flat">Cancel</button>
    <button type="button" class="btn app-btn" …

我是 Angular 的新手，我正在使用 Angular 8 使用 ng-bootstrap 构建一个页面。我的页面上有一个包含 3 个不同部分的手风琴。每个部分包含一个表格。表格中每一行最左边的元素是一个下拉按钮，其中包含我希望能够从中进行选择的页面列表。

问题是我的下拉列表中的项目被隐藏在手风琴面板后面。我已经阅读了很多关于这个问题的 stackoverflow 帖子（特别是引导程序），但是提供的解决方案似乎并没有解决这个问题。我已经尝试在下拉列表中设置 css 属性来设置 z-index 并设置溢出：可见，但这些都没有奏效。在纠结了一段时间之后，我想我会发布一个问题。下面的示例几乎直接来自 ng-bootstrap.github.io。

  <ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0">
    <ngb-panel title="ngbAccordion Panel #1">
      <ng-template ngbPanelContent>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia
        aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
        sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
        craft …

嗨，我使用 angular 8 和 ng-bootstrap 在我的项目中添加表
我发现这段代码我不太理解

  @Directive({
  selector: 'th[sortable]',
  host: {
    '[class.asc]': 'direction === "asc"',
    '[class.desc]': 'direction === "desc"',
    '(click)': 'rotate()'
    }
  })

谁能告诉我代码说什么？
以及选择器中的“th”是什么意思。
还主机我可以将其更改为其他内容，因为编辑说的是，它是旧属性还是什么
谢谢大家

我正在尝试使用ActivatedRoute. 我已经尝试了以下示例，并且能够获得我正在寻找的数据，但只能获得一次。在子路由更改期间，我没有看到更新的“布局”值。

路线

const routes: Routes = [
  {
    path: '',
    component: Layout1Component,
    children: [
      {
        path: '',
        redirectTo: 'home',
        pathMatch: 'full'
      },
      {
        path: 'home',
        loadChildren: './pages/analytics/analytics.module#AnalyticsModule',
        data: {
          layout: 'boxed'
        }
      },
      {
        path: 'files',
        loadChildren: './pages/files/files.module#FilesModule',
        data: {
          layout: 'full'
        }
      }
    ]
  }
];

布局1组件

export class Layout1Component implements OnInit {
  constructor(private service: AppService, route: ActivatedRoute) {
    this.layout = route.snapshot.firstChild.data['layout'];

    route.url.subscribe(() => {
      console.log(route.snapshot.firstChild.data['layout']);
    });
  }
}

我希望每次更改路线时都使用更新的“布局”值打印 console.log。

请帮我解决这个问题。

我正在尝试将 ControlValueAccessor 与 Angular Material datepicker 一起使用。出于某种原因，它不适用于 formControlName 和反应式表单。有人可以解决这个问题吗？正在为某些样式和属性构建包装器。值被发送到反应形式等

https://material.angular.io/components/datepicker/overview

打字稿：

import { Component, OnInit, Input, Output, EventEmitter, forwardRef } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'app-date-picker',
  templateUrl: './date-picker.component.html',
  styleUrls: ['./date-picker.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => DatePickerComponent),
      multi: true
    }
  ], host: {
    '(change)': 'onChange($event)',
    '(blur)': 'onTouch()'
  }
})

export class DatePickerComponent implements OnInit {
  @Input() Value: Date = new Date();
  @Input() PlaceHolder: string;
  @Input() Label:string;
  @Output() dateValueAction = new EventEmitter();

  onChange: any …