标签: angular5

Angular5 服务器端渲染（（未知 url）的 Http 失败响应：0 未知错误）。

我相信上述错误与 CORS 有关。但是没有 SSR 的 angular5 CORS 工作正常。

当我将 Api 更改为子域时，会特别发生这种情况

Laravel API：http://api.localhost:80

节点快递：http://localhost:3000

下面是我为 Laravel PHP api 添加的标题。

        header('Access-Control-Allow-Origin: http://localhost:3000');
        header('Access-Control-Allow-Credentials: true');
        header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE');
        header('Access-Control-Allow-Headers: Origin, Content-Type,Accept, X-Auth-Token ,App-Auth,X-XSRF-TOKEN,Authorization');
        header('Access-Control-Max-Age: 86400');

使用 Node 与 Laravel PHP 通信时，出现以下错误

Uncaught (in promise): [object Object]
    at resolvePromise (D:\ng\app-root\node_modules\zone.js\dist\zone-node.js:824:31)
    at resolvePromise (D:\ng\app-root\node_modules\zone.js\dist\zone-node.js:795:17)
    at D:\ng\app-root\node_modules\zone.js\dist\zone-node.js:873:17
    at ZoneDelegate.invokeTask (D:\ng\app-root\node_modules\zone.js\dist\zone-node.js:425:31)
    at Object.onInvokeTask (D:\ng\app-root\node_modules\@angular\core\bundles\core.umd.js:4783:33)
    at ZoneDelegate.invokeTask (D:\ng\app-root\node_modules\zone.js\dist\zone-node.js:424:36)
    at Zone.runTask (D:\ng\app-root\node_modules\zone.js\dist\zone-node.js:192:47)
    at drainMicroTaskQueue (D:\ng\app-root\node_modules\zone.js\dist\zone-node.js:602:35)
    at ZoneTask.invokeTask …

我正在使用以下代理配置构建 angular 2 应用程序。

代理配置文件

{ 
 "/": {
  "target": "http://localhost:6060",
  "secure": false,
  "changeOrigin": true,
  "logLevel": "debug" 
}}

我使用 spring boot 应用程序作为我的后端，它在端口 6060 上运行

我的包json的构建脚本如下

包.json

"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.conf.json",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
}

当我使用npm start 时，应用程序工作正常。所有后端请求都发送到http://localhost:6060

然后我使用构建生产版本

ng build --prod --proxy-config proxy.conf.json

并将生成的代码部署到 HTTP 服务器（apache 服务器）。然后我访问http://localhost/应用程序统计信息。但是当我尝试发出请求时，这些请求指向http://localhost/ ...而不是http://localhost:6060

我试图找到一些解决方案，但没有这些解决方案。请给我一些帮助。

谢谢

我允许用户动态创建输入字段。对于每个输入字段，我想将其连接到不同的 mat-autocomplete，以便它们彼此独立工作。我在这里遇到了障碍，因为我无法动态创建将自动完成连接到输入的元素引用（此处为#auto）。我该如何实现这一目标？

<div
  class="row"
  *ngFor="let field of getControls('requestFields'); let i = index"
  formArrayName="requestFields"
>
  <ng-container [formGroupName]="i">
    <div class="col-md-4">
      <mat-form-field class="example-full-width">
        <input
          type="text"
          placeholder="Name"
          matInput
          formControlName="reqName"
          matAutocomplete="auto"
        />
        <mat-autocomplete #auto="matAutocomplete">
          <mat-option
            *ngFor="let option of (filteredColumns | async)"
            [value]="option"
          >
            {{ option }}
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>
    </div>
    <div class="col-md-2">
      <div class="togglebutton">
        <label>
          <span>Optional</span>
          <input type="checkbox" formControlName="reqOption" />
          <span class="toggle"></span>
        </label>
      </div>
    </div>
    <div class="col-md-4">
      <mat-form-field>
        <input
          matInput
          formControlName="reqValidations"
          placeholder="Validation"
          type="text"
        />
      </mat-form-field>
    </div>
  </ng-container>
</div>

我对 Angular 5 完全陌生，我想在应用程序打开时显示登录页面。

现在我显示 appComponent，它有工具栏和侧面导航栏。但是当用户加载应用程序时，如果登录成功，我想显示登录屏幕，那么只有用户应该允许查看主页。

如果我将我的应用程序组件作为登录组件，我无法根据用户的菜单选择在主页中加载不同的组件。

应用程序组件.html

<mat-sidenav-container fullscreen>
    <mat-sidenav #sidenav class="app-sidenav">
        <mat-nav-list>
            <a mat-list-item routerLink="/home" routerLinkActive="active-list-item">
                <h2 matLine>Home</h2>
                <mat-icon matListIcon>home</mat-icon>
            </a>
            <a mat-list-item routerLink="/account" routerLinkActive="active-list-item">
                <h2 matLine>Account</h2>
                <mat-icon matListIcon>person</mat-icon>
            </a>
            <a mat-list-item routerLink="/settings" routerLinkActive="active-list-item">
                <h2 matLine>Settings</h2>
                <mat-icon matListIcon>settings</mat-icon>
            </a>
        </mat-nav-list>
    </mat-sidenav>
    <mat-sidenav-content>
        <mat-toolbar color="primary" class="mat-elevation-z3">
            <button mat-icon-button (click)="sidenav.toggle()">
        <mat-icon>menu</mat-icon>
      </button>
      My App
    </mat-toolbar>
    <div class="app-content">
      <router-outlet></router-outlet>  // router-outlet
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

目前，当我运行应用程序时，正在加载此页面。我想显示全屏登录页面，而不是首先显示主页。

const  routings: Routes = [
    {path:'',redirectTo:'/app-root',pathMatch:'full'},
    {path:'home',component:HomeComponent},
    {path:'account',component:AccountComponent},
    {path:'settings',component:SettingsComponent},
    {path:'**',redirectTo:'/app-root',pathMatch:'full'},
];

目前，当 url 为 ' ' …

我有一个 Angular5 应用程序，其结构如下：

页眉、页脚和侧边栏组件放置在Shared --> Components下。Header 和 SideBar 组件导入服务SideBarService（在 Shared 文件夹下）。当用户单击 Header 组件中的侧边栏图标时，SidebarService 用于切换应用于侧边栏组件的类。

我的问题是：根据 Angular 5 应用程序架构，页眉、页脚和侧边栏应该放置在共享模块还是核心模块中。由于我的应用程序具有延迟加载模块，因此将来是否会导致问题，例如如果一个延迟加载模块（例如管理员使用侧边栏服务在侧边栏中进行更改），此更改对其他延迟加载模块是否可见？

原屏，

您好，我可以拉伸图表并增加宽度，但是一旦我点击按钮将宽度缩小到原始状态；图表未调整大小。它仍然使用扩展尺寸

上面是重叠图表的屏幕截图。请任何人帮忙。

我正在尝试将 ng-prime 中的 p-calendar 与 ngmodel 结合使用来绑定来自服务器的日期

 <p-calendar [(ngModel)]="selectedDate"
             [locale]="es"
             [hidden]="!editing"
             dateFormat="d/mm/yy"
             appendTo="body"
             class="pos-cal mar-left-txt"
             [(ngModel)]="currentUserData.person.dateOfBirth">
 </p-calendar>

 <p [hidden]="editing">
     {{currentUserData.person.dateOfBirth | date: 'dd/MM/yyyy'}}
 </p>

这段代码做了我想要的事情，我只是有一个问题。我已将所选日期设置为今天，但这不是我希望用来显示的日期。我想在 p-calendar 上显示出生日期

当我从日历中选择一个日期时，它会绑定到该段落，通常我只会使用管道，但它不起作用

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

例如我从此链接获取的数据： 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> …