标签: angular5

我在表中有一些数据绑定，单击任何特定的我想将当前单击的对象显示更多相关数据到另一个组件（子组件）

例如我从此链接获取的数据： http: //jsonplaceholder.typicode.com/users

HTML 代码：

<table>
  <thead>
    <th>
      Id
    </th>
    <th>
      name
    </th>
    <th>
      username
    </th>
    <th>
      email
    </th>
    <th>
      street
    </th>
    <th>
      suite
    </th>
    <th>
      zipcode
    </th>
    <th>
      phone
    </th>
    <th>
      website
    </th>
    </thead>
  <tbody>
    <tr *ngFor="let data of httpdata"> 
      <td>{{data.id}}
      </td> 
      <td>{{data.name}}
      </td> 
      <td>{{data.username}}
      </td> 
      <td>{{data.email}}
      </td> 
      <td>{{data.address.street}}
      </td> 
      <td>{{data.address.city}}
      </td> 
      <td>{{data.address.suite}}
      </td> 
      <td>{{data.address.zipcode}}
      </td> 
      <td>{{data.phone}}
      </td> 
      <td>{{data.website}}
      </td> 
      <td>
        <a routerLink="/conflict-details/conflict" (click)="onSelect(data)">Go to 
        </a> 
      </td> 
    </tr>
  </tbody>
</table>

如果您看到表中有一个“转到”按钮，当我单击任何特定数据时，它应该向我显示有关当前单击的完整信息，但在我的情况下，当我单击“转到”以获取特定数据时，我想将数据绑定到另一个组件中所有 td 数据都应显示在新组件（子组件）中。

简单我想跟踪子组件中选定数据的单击事件。并且该表在父组件中呈现。

附件是我的数据表。

我正在按照这篇教程文章来测试角度投影的工作原理。在本文中，我遇到了select属性ng-content，我们可以传递class name或attribute选择并定位特定的属性ng-content。

例如：

@Component({
  selector: 'greet',
  template: `
    <ng-content select=".headerText"></ng-content>
    <ng-content select="btnp"></ng-content>
  `


<greet>
  <h1 class="headerText">Hello</h1>
</greet>
<greet>
  <button btnp>Click Here</button>
</greet>

上面的例子运行良好。但是，现在我想要的是动态传递一个类名来选择，例如：

<ng-content select=".headerText{{some_id}}"></ng-content>

但是，当我尝试这样做时，我收到错误：

无法绑定到“select”，因为它不是“ng-content”的已知属性。

我怎样才能实现这个目标？

我正在使用<p-table>它必须<p-tableHeaderCheckbox></p-tableHeaderCheckbox>选中和取消选中该复选框。一切工作正常，但当我移至表中的下一页时，所有内容均未选中，但 selectAll 选项仍处于选中状态。如何取消选中标题复选框。

<p-table #dtGrid [columns]="staticColumns" [value]="serviceIdData" 
    [styleClass]="'table'" scrollHeight="{{scrollHeight}}" [rows]="10" 
    [paginator]="true" (onRowSelect)="onRowSelect($event)" [pageLinks]="3" 
    (onRowUnselect)="onRowUnselect($event)" [rowsPerPageOptions]="[10,25,50,100]" 
    styleClass="table-light" (onHeaderCheckboxToggle)="handleHeaderCheckboxToggle($event)"
    [scrollable]="true"  [lazy]="true"  [(selection)]="selectedRecords"
     (onLazyLoad)="onLazyLoad($event);" [totalRecords]="totalRecords" scrollHeight="450px"  [responsive]="true">
        <ng-template pTemplate="colgroup" let-columns>
              <colgroup>
                  <col *ngFor="let col of columns" [ngStyle]="{'width': col.width}">
              </colgroup>
        </ng-template>
        <ng-template pTemplate="header" let-columns>
            <tr>
              <th role="columnheader" style="width:20px;">
                  <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
              </th>
                <th *ngFor="let col of columns" [pSortableColumn]="col.fieldName" (click)="placeSortIcon()">
                   <div>
                        <span pTooltip={{col.tooltip}} tooltipPosition="top" [innerHtml]="col.label" [ngClass]="'ui-column-title'"></span>
                        <span *ngIf="dtGrid.sortField === col.fieldName" class="fa" [ngClass]="{'fa-sort-desc': dtGrid.sortOrder === -1, 'fa-sort-asc': dtGrid.sortOrder === 1}"></span>
                  </div>
              </th>
            </tr>
          </ng-template> …

目前我正在开发一个使用 Angular 5 和 primeng 的项目。我正在尝试以反应形式将来自下拉列表的国家/地区附加到电话号码中。当我从下拉列表中选择国家/地区代码时遇到问题它不会附加到我必须传递该值的电话号码。

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

import { FormGroup, FormControl } from '@angular/forms';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  profileForm = new FormGroup({
    phoneNumber: new FormControl('')
  })

  onSubmit(phoneValue){
    console.log(phoneValue)
  }

  onCountryChange(event){
    console.log(event);
  }

}

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

import { FormGroup, FormControl } from '@angular/forms';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  profileForm = new FormGroup({
    phoneNumber: new FormControl('')
  })

  onSubmit(phoneValue){ …

我有一个有下拉列表的组件.更改后,它会触发一个事件,该事件通过数组进行过滤,以根据事件值从数组中获取selectedProduct.

我的代码如下:

  public onProductChanged(event): void {
    this.selectedProduct = this.products.find((product: Products) => product.id == event.target.value);
  }

我的选择下拉菜单:

<select id="product" (change)="onProductChanged($event)">
    <option>--- Please Select ---</option>
    <option *ngFor="let product of products" [value]="product.id"> {{ product.displayName }} </option>
</select>

产品对象是一个对象:

{ "id": 1, "name": "name_here", "displayName": "Name Here" }

这一切都有效,但我想在我的组件测试中测试,更改选择值会触发事件并检索正确的值.

我的测试代码如下:

  describe('Product selection', () => {
    it('should select product', () => {

      expect(component.selectedProduct).toBeUndefined();
      productSelectElement.nativeElement.value = 'Product Name';
      productSelectElement.nativeElement.dispatchEvent(new Event('change'));

      fixture.detectChanges();

      expect(component.onProductChanged).toHaveBeenCalled();
      expect(component.selectedProduct).toEqual({ "id": 1, "name": "product_name", "displayName": "Product Name" });
    });
  });

已调用productChanged事件并且该测试通过.但是,我的selectedProduct始终为null.如何使用下拉列表中更改的值触发事件？

我只是将我的项目从4角升级到5.测试部署过程我面临这个问题:编译过程永远不会结束:我正在运行此命令:

ng build --prod

我的版本如下:Angular CLI:1.6.4节点:8.2.1操作系统:darwin x64 Angular:5.2.0 ...动画,通用,编译器,编译器 - cli,核心,表单...... http,平台 - 浏览器,平台浏览器动态...平台服务器,路由器

@angular/cli: 1.6.4
@angular-devkit/build-optimizer: 0.0.38
@angular-devkit/core: 0.0.25
@angular-devkit/schematics: 0.0.48
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.4
@schematics/angular: 0.1.13
@schematics/schematics: 0.0.13
typescript: 2.6.2
webpack: 3.10.0

节点进程占用了大量内存.这是我的显示器的输出

PID    COMMAND      %CPU  TIME     #TH   #WQ  #PORT MEM    PURG   CMPRS  PGRP  PPID  STATE    BOOSTS           %CPU_ME %CPU_OTHRS UID  FAULTS    COW    
9575  node         143.4 28:24.52 11/1  1    48    1691M+ 0B     0B     29574 29574 running  *0[1]            0.00000 0.00000    501  908303+   352
    29574  node         0.0   00:00.60 11    1    51 …

基于此处的LINK-在我的应用中，我已路由：

const routes: Routes = [
 { path: 'blog/:id', component: BlogComponent },
 { path: 'blog/moo', component: MooComponent },
];

并且有以下信息：

如果我们访问/ blog / moo，即使它也匹配第一个blog /：id路径的路径，我们也会显示MooComponent。

重要说明：非参数化路由优先于参数化路由。

不幸的是，它不能那样工作。如果我要转到url，blog/moo则路由将moo视为Id并且将打开BlogComponent。

我想知道如何解决我有两个想法：

1. 我可以改变路径。博客 / id和博客 / moo。

2. 我可以使用UrlMatcher，但是当我更改previos url段时可能会有些问题。因此，此功能应做好充分的准备。

你怎么看？有任何想法吗？

这是我的html，其中包含材料自动完成功能。

<ng-container *ngSwitchCase="'autocomplete'">
    <div [ngClass]="(filter.cssClass || 'col-md-4') + ' mt-2 pt-1'">
        <div class="filter-key-label">
            {{filter.columnTitle}}
        </div>
        <div class="filter-form-control d-flex flex-wrap justify-content-left">
        <mat-form-field class="full-width">
            <input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto" ng-model="blah">
            <mat-autocomplete #auto="matAutocomplete">
                <mat-option *ngFor="let option of getOptionsTypeAhead(filter.key) | async" [value]="option" (onSelectionChange)="typeaheadChange($event, filter.key)">
                {{ option }}
                </mat-option>
            </mat-autocomplete>
            </mat-form-field>
        </div>
    </div>
</ng-container>

目前，我只能使用来检测选择更改，onSelectionChange但是无法检测到该字段最初是否为空，或者在选择了某个项目然后将其删除后是否为空，因此我什么也不会选择，也不会将焦点移到输入字段之外。

如何检测到？

我尝试过onkeypress，ng-change再加上ng-model（不确定如何使用），change但是没有任何效果。库是否已经提供了某些规定，或者我们检测到更改并输入了字段值？

最近更新的稳定版角度已经发布.我已成功从第5版迁移到第6版.

但由于某种原因,我想回滚到版本5.我尝试了以下命令:

npm uninstall -g @angular/cli

它卸载了最新版本的angular-6.

npm cache clean --force

然后安装

npm install -g @angular/cli@1.7.4

但它给出了这个错误

节点版本:8.10.0

npm版本:6.0.0

我time在应用程序中使用输入类型来接收时间：

  <mat-input-container>
<input matInput  formControlName="start_time" type="time" placeholder="Time Start">
<p class="invalid-text" *ngIf="dvrForm.controls.start_time.invalid &&
        (dvrForm.controls.start_time.dirty || dvrForm.controls.start_time.touched)">
  <span *ngIf="dvrForm.controls.start_time.errors.required"> Start Time is required.</span></p>

在我通过输入存储数据后，它以24小时格式存储：

因此，现在当我在视图中显示它时，它会以相同的格式显示，例如：23:11:00，是否可以在视图中显示时 使用类似管道的东西将其转换为12小时格式。