标签: angular6

我有一个带有路由和解析防护的 Angular 应用程序。解析守卫是异步的，并返回一个从返回的可观察量HttpClient.post- 问题是，AJAX 请求完成但可观察量没有完成，因此解析器永远不会完成其工作，并且页面永远不会显示。然而，当我通过管道传输结果时，take(1)它确实完成并且工作正常。我的问题是为什么？HttpClient.postAJAX 请求返回 ok ( ) 后不应该完成吗200 OK？

这是我的解析器的代码：

@Injectable()
export class MyDataResolver implements Resolve<MyData> {
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot)
    : MyData | Observable<MyData> | Promise<MyData> {
    return this.svc.getData().pipe(take(1)); // <-- Why is take(1) necessary here??
}

constructor(private svc: MyService) { }

}

这是调用的服务方法post：

import { HttpClient } from '@angular/common/http';

export class MyService {
  constructor(private http: HttpClient) {}

  getData(): Observable<MyData> {
    return this.http.post('/api/data'), {}).pipe(
      map((resp: { data: …

我试图向输入添加一个条件，其中变量 = 视图，然后将只读属性添加到输入。

这就是我正在尝试的：

<input *ngIf="mode == 'view' readonly">

目前这不起作用。

我在这里做错了什么？

我构建了一个 Angular 6 应用程序，其中包含一个包含将来应重用的组件的库和一个应用程序。我使用 Angular cli 创建了所有内容，所以我有默认的结构

my-app
 |
 +-projects
 |   |
 |   +-my-lib
 |      |
 |      +-src
 |      +-package.json
 |
 +-src
 +-package.json

为了构建项目，我首先使用构建库ng build my-lib --prod，然后使用 构建应用程序ng build --prod。之后 dist 目录看起来像这样

dist
 |
 +-my-app
 +-my-lib

我现在的问题是如何将其部署到我的服务器，以便应用程序可以访问该库。在本地一切正常，所以我应该像往常一样将整个dist目录传输到我的服务器吗？或者我应该将库发布到 npm 并将其添加为我的package.json. 如果是，我如何设置它才能不干扰本地开发，我想在 dist 目录中构建库？

正如您在主题中看到的那样，我收到此错误是因为数据库中的一列是一串 JSON，我想我可以通过在 ngFor 循环中使用 ngFor 循环来解决这个问题。

以下是html：

 <tbody>
  <tr *ngFor="let item of mf.data">
    <td>{{ item.id }}</td>
    <td>{{ item.user_id }}</td>
    <td class="text-right">{{ item.orders_id }}</td>
    <td>
      <ul *ngFor="let x of item.product">
        <li>{{ x.name }}</li>
        <li>{{ x.price }}</li>
        <li>{{ x.category }}</li>
        <li>{{ x.ts }}</li>
        <li>{{ x.enabled }}</li>
        <li>{{ x.counter }}</li>
      </ul>
    </td>
  </tr>
</tbody>

以下是“产品”列的一行的样子：

 [
  {
    "id": "13",
    "name": "test 5",
    "price": "3.42",
    "category": "chocolates",
    "ts": "2019-01-08 10:41:15",
    "product_image_id": "50",
    "enabled": "1",
    "product_image": "40-64-grand-canyon.png",
    "counter": "2"
  },
  {
    "id": "18",
    "name": "test …

我是QR codes从我的 Angular Web 应用程序生成的。我正在使用npm包ngx-qrcode2来生成二维码。

有没有办法用这个npm包或另一个 npm 包JSON在 QR 中存储一个对象。然后读取 QR，并使用 qr reader zxing/ngx-scanner提取 JSON 。

目前，如果我将 JSON 转换为字符串，将该字符串存储在 QR 中，然后当我读取它时，将其解析回JSON.

这是我迄今为止所做的。

生成二维码 https://stackblitz.com/edit/angular-ja13vl

阅读二维码 https://stackblitz.com/edit/angular-qr-reader

在我的 Angular 6 应用程序注册表中，我有一个已选中的复选框。我需要检查用户是否已取消选中该复选框，如果是，我想显示一条错误消息。

这是我在 .html 文件中的复选框，

 <div class="form-group">
       <div class="round">
            <input
                  type="checkbox"
                  id="checkbox33"
                  formControlName="agree">
             <label for="checkbox33"></label>
        </div>
        <small class="text-muted">Agree to our <a href="#" class="link">Terms
                  Of Use</a> and <a href="#" class="link">Privacy Policy</a>.
                </small>
        <span *ngIf="!worldWideRegisterForm.get('agree').valid" class="text-danger">You should agree!</span>

  </div>

这是我在 .ts 文件中的 ngOnInit()

ngOnInit() {
    this.worldWideRegisterForm = new FormGroup({
      'userName': new FormGroup({
        firstName: new FormControl(null, Validators.required),
        lastName: new FormControl(null, Validators.required)
      }),
      'email': new FormControl(null, [Validators.required, Validators.email]),
      'phone': new FormControl(null, Validators.required),
      'address': new FormGroup({
        line1: new FormControl(null, Validators.required),
        line2: new FormControl(null), …

我使用下面的函数作为管道，以获得下拉列表的唯一值。我需要在多个组件中使用它。我如何创建可重用组件以使用此功能。

 @Pipe({
  name: 'unique',
  pure: false
})

export class UniquePipe implements PipeTransform {
  transform(value: any): any {
      if (value !== undefined && value !== null) {
          return _.uniqBy(value, 'orgName');
      }
      return value;
  }
}

我有一个 Springboot 服务，可以将 base64 中的文件（Excel）发送到 Angular6。为了安全起见，我无法直接发送文件，因此，我首先将文件转换为 base64 ...

在我的 Angular 中，我可以收到 base64 ：

 {
  "file" : "UEsDBBQACAAIAJOOOU/kSK2vGAEAADMDAAATAAAAW0NvbnRlbnRfVHlwZXNdLnht" 
 }  

字符串文件比较长...

但是，当我尝试打开此文件时，在 LibreOffice 中出现错误“文件损坏”

this.data.getFile(endPoint).subscribe( 
          data => {          
                     const myfile= atob(data.file);
                     const blob = new Blob([myfile], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
                     saveAs(blob, 'myfile.xlsx'); 
                  } );

编辑：

这是“myfile”=> 的值

请，我需要帮助..

当我这样做时，Angular 不会出错，saveAs(blob, 'myfile.xlsx'); 但是如果我尝试打开文件，则会出错。

我正在使用 angular 6 生成动态模板。我有一个返回字符串的 API，如下所示：

    <button type="button" (click)="openAlert()">click me</button>

和 html

    <div [innerHtml]="myTemplate | safeHtml">
      </div>

功能如下：

    openAlert() {
        alert('hello');
      }

我在 angular 6 项目中使用 ng2-pdf-viewer，

在项目编译时，它会出现以下错误

node_modules/@types/pdfjs-dist/index.d.ts(63,39) 中的错误：错误 TS2304：找不到名称“未知”。
node_modules/@types/pdfjs-dist/index.d.ts(65,34)：错误 TS2304：找不到名称“未知”。
node_modules/@types/pdfjs-dist/index.d.ts(80,31)：错误 TS2304：找不到名称“未知”。
node_modules/@types/pdfjs-dist/index.d.ts(82,30): 错误 TS2304: 找不到名称“未知”

我的 package.json 文件如下面的帖子

"dependencies": {
"@angular/animations": "^6.1.10",
"@angular/common": "^6.1.0",
"@angular/compiler": "^6.1.0",
"@angular/core": "^6.1.0",
"@angular/forms": "^6.1.0",
"@angular/http": "^6.1.0",
"@angular/platform-browser": "^6.1.0",
"@angular/platform-browser-dynamic": "^6.1.0",
"@angular/router": "^6.1.0",
"@ngx-translate/core": "^11.0.1",
"@ngx-translate/http-loader": "^4.0.0",
"@vimeo/player": "^2.10.0",
"@types/node": "10.3.1",
"angular-6-datatable": "~0.8.0",
"angular-6-social-login": "~1.1.1",
"bootstrap": "^4.3.1",
"core-js": "^2.5.4",
"crypto-js": "~3.1.9-1",
"devextreme": "^19.1.5",
"devextreme-angular": "^19.1.5",
"font-awesome": "~4.7.0",
"jquery": "^3.4.1",
"ng2-drag-drop": "^3.0.2",
"ng2-pdf-viewer": "^6.0.2",
"ng5-slider": "^1.2.4",
"ngx-bootstrap": "^3.3.0",
"ngx-drag-scroll": "~7.4.2",
"ngx-image-cropper": "~1.3.10",
"ngx-loading": "^3.0.1", …