标签: angular5

使用角度材料 mat-table 时是否可以将特定数据行滚动到视图中cdk-table？

我试图在没有运气的情况下实现键盘滚动。

如果我的 FormGroup 的字段是模型绑定的，ala [(ngModel)]，并且在页面加载时填充，例如由于服务，我的提交按钮，它被保护为[disabled]="biodataForm.status !== 'VALID'"，不会被禁用。如果表格出现空白并且我正常填写，那么当表格正确填写时，警卫会通过。如果通过数据绑定填充了相同的确切值，则 biodataForm.status 值将保持无效，直到我更改每个字段的值。

我的感觉是，在填充数据绑定后，表单应该识别出它具有有效内容，因此它的状态应该从 INVALID 更改为 VALID ......这里出了什么问题？

我的表单标记如下所示：

  <form class="form" name="biodataForm" [formGroup]="biodataForm">
    <mat-form-field class="full-width">
      <input matInput placeholder="First Name" 
        required
        [(ngModel)]="_memberdata.firstname"
        [formControl]="firstnameFormControl">
      <mat-error *ngIf="firstnameFormControl.invalid">{{getRequiredErrorMessage('firstname')}}</mat-error>        
    </mat-form-field>
    <mat-form-field class="full-width">
      <input matInput placeholder="Last Name" 
        required
        [(ngModel)]="_memberdata.lastname"
        [formControl]="lastnameFormControl">
      <mat-error *ngIf="lastnameFormControl.invalid">{{getRequiredErrorMessage('lastname')}}</mat-error>                
    </mat-form-field>
    <mat-form-field class="full-width"
      hintLabel="Note: We'll send you an email with a link to click to prove it's you">
      <input matInput placeholder="Email" 
        required
        [(value)]="_memberdata.email"
        [formControl]="emailFormControl">
      <mat-error *ngIf="emailFormControl.invalid">{{getEmailErrorMessage()}}</mat-error>        
    </mat-form-field>    
    <mat-form-field class="full-width">
      <input matInput placeholder="Phone" type="tel" 
        [(value)]="_memberdata.phone"
        required …

我正在使用 angular 5 示例项目，想要使用 angular5 组件结构为屏幕截图或捕获屏幕视频构建功能。

我目前正在使用 Angular 5 应用程序，该应用程序将在 ngrx-store 中使用一些缓存策略，以允许用户查看项目并返回主列表，而无需再次发出请求。

我正在使用 Effect 请求数据并使用 reducer 根据我的 htp 响应更新我的全局状态。如您所见，成功触发 RequestPartnersSuccess 操作，错误触发 RequestPartnersFail 操作。

我的全局状态中的属性“internalAppDynamic.searchPartners.recoverLatest”指示我是否应该从缓存中恢复我的列表，在这种情况下，效果应该在这个“if”语句中返回一个方法并完成我的流。

@Effect()
  loadPartners$ = this.actions$
    .ofType(SearchPartnersActions.REQUEST_PARTNERS)
    .withLatestFrom(this.store$, (action, state) => {
      action = Object.assign(action, {recoverLatest: state.internalAppDynamic.searchPartners.recoverLatest})
      return action
    })
    .pipe(switchMap((action: any) => {
      if (action.recoverLatest) {
        return new SearchPartnersActions.RequestPartnersRecoverCache()
      }
      return this.internalPartnersService.getPartners(action.payload).pipe(
        map(partners => new SearchPartnersActions.RequestPartnersSuccess(partners)),
        catchError(error => of(new SearchPartnersActions.RequestPartnersFail(error)))
      )
    }))

这是我的服务中的 getPartners() 函数：

getPartners (body): Observable<any> {
    return this.http
    .post(this._baseUrl + 'internal-app/get-partners', body, this.httpOptions)
    .pipe(catchError((error: any) => this.errorHandler(error)))
  }

问题是我找不到实现这个结果的方法。我是 rxjs …

我有一个数据表，我在其中显示分支数据，但需要隐藏索引为 0 的项目。

    <ngx-datatable
          class="data-table table-responsive task-list-table"
          [rows]="branches"
          [loadingIndicator]="loadingIndicator"
          [columnMode]="'force'"
          [headerHeight]="50"
          [footerHeight]="50"
          [limit]="10"
          [rowHeight]="66"
          [reorderable]="reorderable">
          <ngx-datatable-column name="Branch Office Name">
            <ng-template let-rowIndex="rowIndex" *ngIf="rowIndex != 0" let- 
            branch="row" ngx-datatable-cell-template>
              {{branch['name']}}
            </ng-template>
          </ngx-datatable-column>
          <ngx-datatable-column name="Parent Branch">
            <ng-template let-rowIndex="rowIndex" *ngIf="rowIndex != 0" let- 
             branch="row" ngx-datatable-cell-template>
              {{branch['parentOrganizationName']}}
            </ng-template>
          </ngx-datatable-column>
  </ngx-datatable>

我试过用 *ngIf 指令来做，但它不起作用。我该如何解决这个问题？

我的应用程序使用这些类：“ large-screen ”用于桌面视图，“ small-screen ”用于移动视图。我正在尝试使用ngClass，因此我可以在容器或包装器 div 中的这些类之间切换各种组件，但我的所有实现似乎都不起作用。

要求是桌面视图切换到“大屏”，移动视图切换到“小屏”。下面是已经存在的媒体查询。

@media only screen and (max-width: 415px) {
  .large-screen {
    display: none;
  }
}
@media only screen and (min-width: 415px) {
  .small-screen {
    display: none;
  }
}

如果有人能提出不同的建议，将不胜感激。

最近我开始积极使用模板来自定义我的 UI 组件。我还使用 OnPush 更改检测策略来优化性能。如果我将模板传递到嵌套组件上，一切都会顺利。用户操作会触发嵌套组件中的更改检测，它会一直传送到定义模板的原始组件，更改检测也在那里触发，更新模板以及我在其中拥有的任何其他逻辑。

但是，如果我尝试使用模板创建弹出/警报/工具提示功能 - 我开始将 TemplateRef 向上传递到弹出窗口宿主组件中。因此，如果我对其执行任何操作 - 更改检测将不会到达模板的原点。所以让我们假设我在伪代码中有这个组件：

<p>Your balance: {{balance}}</p>

<ng-template #popup>
  Your balance: {{balance}}
  <button (click)="balance -= 100">Withdraw</button>
</ng-template>

如果我将此模板传递给位于 DOM 树中的弹出主机组件：

<main-component>
   <balance></balance>
</main-component>
<popup-host></popup-host>

然后点击“撤回”不会触发原始组件中的更改检测。弹出窗口中模板内的 {{balance}} 将被更新，但尽管它与原始余额组件中的变量相同 - balance 不会知道这个变化，直到某些东西触发了它的变化检测。

任何人都可以分享他们将如何处理这个问题的想法吗？OnPush 和模板是非常强大的工具，但我无法弄清楚在这种情况下将它们组合在一起的方法，因为 TemplateRef 没有对其原始组件的任何引用，只有其 DOM 注释节点。

我可以强制将原始组件的 ChangeDetectorRef 传递给弹出服务，但我想为这样的任意情况提出解决方案。任何建议将不胜感激！

我正在使用角材料垫选择显示下拉列表。我想使用材料工具提示显示所选元素。

<mat-select [(ngModel)]="emp" [(value)]="selected" matTooltip="{{selected}} 
(openedChange)="oChange($event)" placeholder="Employee" [formControl]="toppings" multiple>
<mat-option  *ngFor="let p of emp" [value]="p" >{{p.name}}</mat-option>
</mat-select>
</mat-form-field>

但它显示 [object object]

这是emp的内容

emp[
{"id":0101,"name":"damshad"},
{"id":0102,"name":"ranjan"},
{"id":0103,"name":"himanshu"},
{"id":0104,"name":"gourge"},
{"id":0105,"name":"taffic"},
{"id":0106,"name":"ajir"},
{"id":0107,"name":"mallom"}
]

请帮忙

我正在构建一个必须使用 http 的 Angular5 项目。我在这里使用 observable，但是当我使用 'of' 时

 scope.fetchApi = Observable.of(data);

然后它给了我一个错误：

Property 'of' does not exist on type 'typeof Observable'. 

我也导入了'rxjs/add/observable/of';，但也有同样的错误。我也试过，import { Observable } from 'rxjs/Observable';但它抛出了一个错误：

Module '"eclipse:angular5-example/node_modules/rxjs/Observable"' has no exported member 'Observable'.

你可以看到我的代码如下：

import { Component, OnInit } from '@angular/core';
import { UserService } from './app.service';
import { FetchApi } from '../models/fetch-api.model';
import { Router } from '@angular/router';
import { Observable } from 'rxjs';
import  'rxjs/add/observer/of';

@Component({
  selector: 'app-fetch-api',
  templateUrl: './fetch-api.component.html',
  styleUrls: ['./fetch-api.component.css']
}) …

import { SpinnerComponent, ExternalLibrary } from 'external.library'
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, ExternalLibrary
  ],
  bootstrap: [AppComponent]
  , entryComponents: [SpinnerComponent]
})

以上是我将 entryComponent 指定为模块的代码。这个 SpinnerComponent 也来自一个外部模块，即 ExternalModule。

Webpack 报错：

SpinnerComponent 中的 ERROR 不能用作入口组件。

属于同一模块是否要求组件出现在 entryComponents 属性列表中？

据我所知，在出现在 entryComponent 属性之前，没有为组件指定这样的先决条件。