标签: angular5

我在Angular5项目中有这个import语句:

import {plugins, SCECodeGenType} from 'sce-plugins/code-generation';

这解析了我的文件系统上的这个路径:

/Users/.../suman-chrome-extension/node_modules/sce-plugins/code-generation/index.d.ts

在构建应用程序时ng build -w,我收到此错误:

ERROR in ../sce-plugins/code-generation/index.ts Module build failed: Error: /Users/alexamil/WebstormProjects/oresoftware/sumanjs/sce-plugins/code-generation/index.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at AngularCompilerPlugin.getCompiledFile (/Users/alexamil/WebstormProjects/oresoftware/sumanjs/suman-chrome-extension/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:662:23)
    at plugin.done.then (/Users/alexamil/WebstormProjects/oresoftware/sumanjs/suman-chrome-extension/node_modules/@ngtools/webpack/src/loader.js:467:39)
    at <anonymous>  @ ./src/app/shared/services/lang.service.ts 14:24-62  @ ./src/app/app.module.ts  @ ./src/main.ts  @ multi ./src/main.ts

我相信这是因为我npm link用来链接'sce-plugins'项目以进行本地开发.

我npm link在这里看到与Angular5项目一起使用的一些问题:

https://github.com/angular/angular-cli/issues/3875

https://github.com/angular/angular-cli/issues/8677

https://github.com/angular/angular-cli/issues/9376

有谁知道如何解决？

更新:

它似乎与npm linkperse或符号链接没有关系.如果我只是将本地目录复制到node_modules/sce-plugins,我会得到同样的错误. …

我3天前开始学习角度,所以我很陌生.我还使用angularJS和React开发应用程序,我想我不明白角度5组件是如何完全工作的.如果我创建一个自定义文本的自定义按钮(我不是说这应该以这种方式完成,但这是一个显示我的观点的简单示例),如下所示:

<app-button>
  <app-text>
    My Text
  </app-text>
</app-button>

渲染的DOM导致:

<app-button>
  <button>
    <app-text>
      <span>
        My Text
      </span>
    </app-text>
  </button>
</app-button>

这是不可读的,我想知道是否有办法删除这个包装元素,只是放置组件布局替换标签导致以下结构:

<button>
  <span>
    My Text
  </span>
</button>

如果没有办法删除它们你的建议是什么？谢谢!

<div class="col-xs-6 col-md-4 home-content" *ngFor="let s of abc">
    <mat-card>
        <mat-card-header>
            <mat-card-title>{{s.header}}</mat-card-title>
        </mat-card-header>
        <mat-card-content>
            <p> {{s.Desc}} </p>
        </mat-card-content>
        <mat-card-actions>
            <button mat-raised-button type="submit" color="primary">Submit</button>
        </mat-card-actions>
    </mat-card>
</div>
<div class="col-xs-6 col-md-4 home-content" *ngFor="let s of abc">
    <mat-card>
        <mat-card-header>
            <mat-card-title>{{s.header}}</mat-card-title>
        </mat-card-header>
        <mat-card-content>
            <p> {{s.Desc}} </p>
        </mat-card-content>
        <mat-card-actions>
            <button mat-raised-button type="submit" color="primary">Submit</button>
        </mat-card-actions>
    </mat-card>
</div>

我有一个 mat-table，其中有几个可排序的列。我可以使用 mat-table 上的 matSortActive 和 matSortDirection 属性设置表格的初始排序。使用此功能，可以正确显示标题中指示排序方向的箭头。

现在，当我尝试使用按钮将排序重置为初始状态时，排序已正确重置。但是，标题中的箭头不会更新。所以箭头仍然显示在上一个排序列的标题中。如何让箭头再次显示在初始状态？

我的表格和 HTML 中的重置按钮：

<button mat-button mat-raised-button (click)="removeFilters()" class="reset-button">Verwijder filters</button>

<mat-table #table [dataSource]="dataSource" matSort (matSortChange)="sortData($event)" matSortActive="comp_name_sort" matSortDirection="asc">
  <ng-container matColumnDef="assetName">
    <mat-header-cell *matHeaderCellDef mat-sort-header="comp_name_sort">Systeem</mat-header-cell>
    <mat-cell *matCellDef="let asset"> {{asset.comp_name}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="softwareName">
    <mat-header-cell *matHeaderCellDef mat-sort-header="soft_name_sort">Software</mat-header-cell>
    <mat-cell *matCellDef="let asset"> {{asset.soft_name}} </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

我的 ts 文件：

  export class AssetsComponent implements OnInit {

  @ViewChild(MatSort) sort: MatSort;

  assets: Asset[];
  displayedColumns = ['assetName', 'softwareName',];
  dataSource = new MatTableDataSource<Asset>(this.assets);

  constructor( private assetsService: …

如何将 ngFor 变量传递给 ng-content 模板。

例如，包含组件：

<ul>
    <li *ngFor="let item of itemsArray">
       <ng-content></ng-content>
    </li>
</ul>

嵌套的内容组件：

<div>
    <span *ngIf="item.type_one"></span>
    <span *ngIf="item.type_two"></span>
</div>

例如，两者：

<containing-component>
    <content-component>
    </content-component>
</containing-component>

我正在处理 angular 5 我想创建一个自定义日期管道，允许我从日期中减去一些天数：

这是我显示日期值的方式：

 <span>{{data.nextCertificateUpdate | date:'yyyy-MM-dd'}}</span>  

例如，这显示一个值，如：2018-08-29

我问是否可以创建一个管道，允许我从这个日期减去天数，例如 28 天？

就像是 ：

<span>{{data.nextCertificateUpdate | mypipe:28 }}</span>  

这应该显示如下值：2018-08-01

谢谢你的帮助

我希望通过对服务器的服务调用来接收HTML数据(这是肯定的.我不能将模板保存在本地)并在内部操作它们如何显示它(作为模态或整页).带有Angular标记的HTML应该循环到一个组件并一起工作.在Angular JS中大多数是$ compile.

我正在开发Angular 5中的解决方案,并且应该与AOT编译器兼容.我已经提到了几个解决方案,并且对已弃用和更新的解决方案感到困惑.请帮我.我相信你的最新答案也可以帮助很多其他人..非常感谢你提前!

我使用材料(https://material.angular.io/components/datepicker/overview)作为角度5.我们可以在DatePicker中选择年份和月份(我不想选择日期,默认情况下必须选择日期) ？例如: - 如果用户选择7月/ 2017,则组件将其解析为7月的第一天.像新约会(2017,6,1);

我有一个httpClient帖子,通过服务,没有给我任何错误,但它也没有将数据发布到数据库.

这是代码:

dataService.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable()
export class DataService {

  constructor(private http: HttpClient) {}

  insertData() {
    const body = JSON.stringify({firstName: 'Joele', lastName: 'Smith4'});
    return this.http.post('http://myurl/index.php', body, httpOptions);
  }

}

app.component.ts

import { Component } from '@angular/core';
import { DataService } from './services/data.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  constructor(private dataService: DataService) {} …

我有一个父组件,里面有一个子组件.父组件有一些css类,其中子组件扩展它们.我尝试使用:host作为查看文档,但似乎无法让它正常工作.

子组件:

<div class="table-row body">
<div class="table-cell body-content-outer-wrapper">
    <div class="body-content-inner-wrapper">
        <div class="body-content">
            <div>This is the scrollable content whose height is unknown</div>
            <div>This is the scrollable content whose height is unknown</div>
            <div>This is the scrollable content whose height is unknown</div>
        </div>
    </div>
</div>

父组件:

         <div class="table container">
                 <div class="table-row header">
                        <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
                        <div id="demo" class="collapse">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                            Ut enim …