小编ysf*_*ysf的帖子

在我的 angular 应用程序版本从angular 7升级到angular 8 之后， 我遇到了像这样的行的复杂问题

export class followupComponent implements OnInit {
    @ViewChild('message') messageElement: ElementRef;

    constructor(){}
    ...
}

我读到新定义需要static参数并更改代码

@ViewChild('message', { static: true })) messageElement: ElementRef;

我认为问题已经解决了。

但是不，我接受运行时错误：

无法读取未定义的属性“nativeElement”

与此代码相关

HTML：

@ViewChild('message', { static: true })) messageElement: ElementRef;

TS：

<div class="message">
    <div class="action-buttons">
        <img src="{{imgPath + '_Edit_Hover.png'}}" (click)="OnEdit(Followup)">
    </div>
    <textarea matInput #message [ngModel]="Followup.Message"></textarea>
</div>

ElementRef角度 8的正确定义是什么，

或 - 如何解决这个问题？

我在 div 中有一个带有参考的地图#mapa 当我想在地图中追踪路线时，地图会刷新。我不想刷新地图我有以下代码：

<div style="height: 500px; width: auto;" #mapa>
  <google-map height="500px" width="100%" [zoom]="zoom" [center]="center" [options]="options" (mapClick)="click($event)">
    <map-marker #markerElem *ngFor="let marker of markers" [position]="marker.position" [label]="marker.label" [title]="marker.title" [options]="marker.options" (mapClick)="openInfo(markerElem, marker.info)" (mapDragend)="moveMap($event)">
    </map-marker>
    <map-info-window>{{ infoContent }}</map-info-window>
  </google-map>
</div>

如果我删除带有引用的 div#mapa并将其放入<google-map>标签中，则会出现标题错误并显示没有路线的地图。

trazarRutaMapa() {
  const directionsService = new google.maps.DirectionsService;

  const directionsDisplay = new google.maps.DirectionsRenderer;
  const map = new google.maps.Map(this.mapa.nativeElement, {
    zoom: 7,
    center: {
      lat: this.markers[0].position.lat,
      lng: this.markers[0].position.lng
    }
  });

  directionsDisplay.setMap(map);
  directionsDisplay.setOptions({
    suppressMarkers: false,
    draggable: true,
    markerOptions: {
      icon: …

我正在尝试填充一个包含一些 PrimeNg 下拉菜单的表单。为了简单起见，让我使用类似于他们网站上的示例。

<form [formGroup]="myFormGroup">
  <p-dropdown [options]="cities" formControlName="selectedCity"></p-dropdown>
</form>

this.cities = [
  {name: 'New York', code: 'NY'},
  {name: 'Rome', code: 'RM'},
  {name: 'London', code: 'LDN'},
  {name: 'Istanbul', code: 'IST'},
  {name: 'Paris', code: 'PRS'}
];

因此，假设用户从行程表中选择一行进行编辑。它对应于一些复杂的对象，其中包含 City 属性。我们需要以编程方式在表单的下拉列表中选择罗马。

我尝试这样做：

this.myFormGroup.get("selectedCity").setValue('Rome');

尝试过：

this.myFormGroup.get("selectedCity").patchValue('Rome');

尝试添加到html：

optionLabel="name"

什么都没有被选中。

有什么建议如何正确地做吗？

我想我不应该添加

[(ngModel)]="selectedCity"

并做：

this.selectedCity='Rome';

使用 Angular6 和 PrimeNG 6.1.2。

我刚刚将我的项目更新到 Angular 9。此外，我还将 PrimeNG 更新到 9.1.2。现在我的

import {GrowlModule} from 'primeng/primeng';

不起作用，它说GrowlModule该目录中没有。我知道在版本 9 中一些导入已经改变，所以我也尝试过，primeng/api但它也不存在。有人可以告诉我在哪里可以找到这个模块吗？

我对使用PrimeNG FullCalendar组件遇到的一个非常奇怪的问题感到疯狂，这个问题： https ://primefaces.org/primeng/showcase/#/fullcalendar

这是基于Angular FullCalendar组件的，这个：https: //fullcalendar.io/

特别是，我试图实现像最后一个链接这样的行为，其中可拖动事件被移动到日历中。

与链接示例不同，我的可拖动事件有开始和结束时间。例如，我想将事件拖到日历的特定日期，指定它从07:00开始，到15:00结束（这是因为我的日历代表工作轮班日历，其中人员在特定时间范围内工作）。

在这里您可以找到我的完整代码：https ://bitbucket.org/dgs_poste_team/soc_calendar/src/master/

好的，正如您在应用程序组件视图中看到的那样：

<div class="container">
  <div class="row">
    <div class="col-12">
      <app-header></app-header>
    </div>

    <div class="row">
      <div class="col-4">
        <p>DRAGGABLE</p>
        <app-people-list></app-people-list>
      </div>
      <div class="col-8">
        <app-fullcalendar></app-fullcalendar>
      </div>
    </div>
  </div>
</div>

左侧有一个<app-people-list>组件，显示事件\人员列表，我可以将其拖到日历中以进行特定的工作轮班。

在右侧，我有<app-fullcalendar>渲染日历的组件。

进入PeopleListComponent类（组件的控制器app-people-list）我有这个ngAfterViewInit方法：

ngAfterViewInit() {
  console.log("PEOPLE LIST ngAfterViewInit() START !!!")
  var self = this

  new Draggable(this.draggablePeopleExternalElement.nativeElement, {
    itemSelector: '.fc-event',
    eventData: function(eventEl) {
      console.log("DRAG …

我正在使用 Tabulator.js v4.2.7 并且我有一个复选框列来选择行。此列标题有一个复选框来选择/取消选择所有行。

这工作正常。但是单击标题复选框后，所有行都将被选中，如果我取消选中任何行复选框，则标题复选框不会被取消选中。

例如，如果我有 5 行并且如果我单击标题复选框，则所有 5 行都将被选中，现在如果我取消选中第二行复选框，剩余的 4 行仍将被选中并且需要取消选中标题复选框。但是标题复选框并没有被取消选中。

这是我的复选框列代码：

{
    title: 'Select <br/> All <br/> <input type="checkbox" class="select-all-row" aria-label="select all rows" />',
    field: 'IsSelected',
    formatter: function(cell, formatterParams, onRendered) {
        return '<input type="checkbox" class="select-row" aria-label="select this row" />';
    },
    width: 50,
    headerSort: false,
    headerFilter: false,
    cssClass: 'text-center',
    frozen: true,
    tooltips: false,
    resizable: false,
    cellClick: function(e, cell) {
        var $element = $(cell.getElement());
        var $chkbox = $element.find('.select-row');
        if (cell.getData().IsSelected) {
            cell.getRow().deselect();
        } else {
            cell.getRow().select();
        }
        $chkbox.prop('checked', !cell.getData().IsSelected);
        cell.getData().IsSelected …

当用户单击浏览器后退按钮时，我想设置材质扩展面板/手风琴、材质选项卡的 UI 状态。

注意：我不想实现 redux 或 ngrx/store。

例如用例：

在当前页面上，我折叠了第二个扩展面板，然后导航到第四个选项卡。如果我单击离开该页面然后单击返回，我希望这些特定组件处于我离开它们的 UI 状态。

从那时起，每次我单击后退或前进到某个点时，如果这些组件存在以按原样设置 UI 状态。

我知道材质扩展面板和材质选项卡 API 允许您设置折叠面板或活动选项卡，这个问题是您在前后导航以设置这些属性时如何记住状态。

你会使用服务吗？我会使用路由器并设置查询参数吗？

您如何解决这个问题的任何建议都会有很大帮助。

提前致谢。

我有这些路线

应用路由

{
   path: 'user',
   canLoad: [AuthGuard],
   loadChildren: () =>
   import('./user/user.module').then((m) => m.PublicUserModule)
}

用户路由

{
    path: '',
    component: PublicUserPageComponent,
    canActivate: [UserPhonesCheckGuard],
    children: [
      /*{
        path: '',
        pathMatch: 'full',
        redirectTo: 'check'
      },*/
      {
        path: 'account',
        loadChildren: () =>
          import('./account/user-account.module').then(
            (m) => m.PublicUserAccountModule
          )
      },
      {
        path: 'check',
        loadChildren: () =>
          import('./check/user-check.module').then(
            (m) => m.PublicUserCheckModule
          )
      }
    ]
  }

根据某些条件使用 UserPhonesCheckGuard 我想重定向或检查或帐户子路由，但使用

canActivate() 
    return this.router.parseUrl('/user/check');
  }

浏览器发疯了:(

我应该使用什么路径？

我想创建一个嵌套的路由movies/:id但是，使用我当前的配置，当用户导航到movies/1父组件时，始终会呈现。我需要MovieDetailComponent在movies/1url 上渲染。这是我的配置：

const routes: Routes = [{
    path: '',
    component: HomeView
  },
  {
    path: 'movies',
    component: MoviesView,
    children: [{
      path: ':id',
      component: MovieDetailComponent
    }]
  },
  {
    path: 'not-found',
    component: PageNotFoundComponent,
    pathMatch: 'full'
  },
  {
    path: '**',
    redirectTo: 'not-found'
  }
];

我尝试过先添加pathMatch: 'full'到父组件，然后添加到子组件，然后再添加。当我添加pathMach: 'full'到父组件时，子URL甚至都不会被点击；当我将pathMatch: 'full'just 添加到子组件时，即使URL为，也只会呈现父组件。/movies/:id为什么会这样？

当我将子路径移动到其自己的路径中时（未嵌套），该组件将正确呈现。

const routes: Routes = [{
    path: '',
    component: HomeView
  },
  {
    path: 'movies',
    component: MoviesView
  },
  {
    path: …