标签: angular6

我正在尝试构建 Web 应用程序 Spring Boot 作为后端，并构建 Angular 作为前端，但我面临着一些有关会话和获取所有组件数据的问题。

当用户登录时，我使用 sessionStorage.setItem() 但是当我尝试在我的家中获取用户数据时，我使用 sessionStorage.getItem()。问题是我必须刷新页面才能填充数据。

您能否帮助我了解在不刷新所有页面的情况下填充数据的最佳实践？

我正在使用 Angular 6，我想为我在下面编写的代码做可扩展的搜索栏。

我的代码

现在我的问题是我想在聚焦时在搜索框中输入值后停止转换。如果搜索栏为空，则会发生转换。请帮忙。

展开/折叠 mat-tree 中的所有节点工作正常。但我不明白如何扩展 mat-tree 中的特定节点？

请提供任何参考或解决方案。

我正在尝试创建一个搜索服务，用于在输入中进行实时搜索。我有 search.service.ts：

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

import { Observable } from 'rxjs';
import { map, debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class SearchService {

  baseUrl: string = 'https://api.cdnjs.com/libraries';
  queryUrl: string = '?search=';

  constructor(private http: Http) { }

  search(terms: Observable<string>) {
    return terms.pipe(debounceTime(400)
      .distinctUntilChanged()
      .switchMap(term => this.searchEntries(term)));
  }

  searchEntries(term) {
    this.http.get(this.baseUrl + this.queryUrl + term).pipe(map(res => {
      res.json();
    }))
  }
}

和 app.component.ts：

import { Component …

我是 Angular(6) 的新手。setInterval我在组件中使用函数。它正在工作，但是当我导航到另一条路线时，它setInterval会继续执行。请帮我查明原因。

//Calling it in ngOnit()
autosavedraftsolution() {
      setInterval(() => {
        console.log(this.draftSolutionForm);
        if (this.solutionTitleValid) {
          this.savedraftsolution();
        }
      }, this.autoSaveInterval);
    }

//savedraftsolution()
  savedraftsolution() {
    console.log("saving..");

    this.connectService.saveDraftSolution({
      Title: this.draftSolutionForm.get('Title').value,
      Product: this.draftSolutionForm.get('Product').value
    } as Draftsolution).subscribe(draftsol => {
      console.log("saved");

    });
  }

它不断在控制台中向我显示“正在保存..”和“已保存”消息。

编辑#2

在我的www/目录中，我有我的服务器脚本和文件.htaccess：

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule ^([\w-]+)$ api.php [L]
DirectoryIndex api.php

#RewriteCond %{REQUEST_URI} !echo.php
#RewriteRule .* echo.php?ua=%{HTTP_USER_AGENT}&https=%{HTTPS} [L]

SetEnvIf Origin "^http(s)?://(.+\.)?(dev.local\.com|localhost:8100|localhost:4200)$" ORIGIN=$0
Header always set Access-Control-Allow-Origin %{ORIGIN}e env=ORIGIN
Header merge Vary Origin

Header set Access-Control-Allow-Credentials "true"
Header set Access-Control-Allow-Headers "Content-Type, cookie"
Header set Content-Type "application/json"
Header set Access-Control-Allow-Methods "GET, POST"
# prevent mime based attacks
Header set X-Content-Type-Options "nosniff"

在我的桌面上，我有运行的 Angular 项目：

ng build --prod --aot

我里面有一个文件夹，名为dist/angular/ …

我在存储的对象数组中有结构数据库，如下所示：

 arry = [{"name": "a", "id": "2", "data":"foo", "parent": "1"},
 {"name": "b", "id": "3", "data":"foo", "parent": "2"},
 {"name": "c", "id": "4", "data":"foo", "parent": "3"},
 {"name": "d", "id": "5", "data":"foo", "parent": "3"},
 {"name": "e", "id": "6", "data":"foo", "parent": "4"},
 {"name": "f", "id": "7", "data":"foo", "parent": "5"}]

我想要这样的嵌套结构

{
"2":{
   "name": "a",
   "data": "foo",
  "3":{
     "name": "b",
     "data":"foo",
     "4":{
        "name": "c",
        "data":"foo",
        "6":{
           "name": "e",
           "data": "foo",
          };
       },
      "5":{
         "name": "d",
         "data": "foo",
         "7":{
            "name": "f",
            "data": "foo"
           }
        }
      } …

我需要显示后端最近的 5 项。我应该缓冲 observable 中的最后 10 个项目，但 observable 可能只有 0..4 个项目并且永远不会创建缓冲区，所以我需要 2000ms 的 maxtime。问题是我测试过：bufferTime(2000, null, 5)但这会发出空数组。如何避免 observable 发出空数组？缓冲区应始终保存最后 10 个项目，并且仅在添加新项目时才发出新缓冲区。

// [A,B,C]       - after 2s,      buffer -> [A,B,C]
// [A,B,C]       - after 2s,      buffer -> [] --> AVOID THIS
// [A,B,C]       - after 2s,      buffer -> [] --> AVOID THIS
// [A,B,C,D,E]   - after count 5, buffer -> [A,B,C,D,E]
// [A,B,C,D,E,F] - after count 5, buffer -> [B,C,D,E,F]

http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-bufferTime

我正在使用 Angular 6，需要预览某个路径中存在的文件。我需要预览任何文件类型，如 img、doc、pdf、excel 等（所有 Office 文档）。是否有任何单个库同时支持两者或需要使用不同的库。如果我可以遵循任何示例或任何链接，请告诉我

提前致谢。

我是 Angular 6 的新手，正在为教师开发管理面板。我开发了整个管理面板，没有任何问题。开发管理客户端后给了我一个单独的 html 文件用于登录目的。这就是整个问题的开始。所以我决定通过路由来完成。我创建了管理面板和登录页面的布局。但现在我收到 **“app-root”选择器不匹配** 错误。

下面是我的 appComponent 打字稿

import { Component, OnInit, Inject } from '@angular/core';
import {ToastrService} from './services/toastr.service';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [],
  providers:[ToastrService]
})
export class AppComponent  {
  }

这是我的index.html

<app-root>loading....</app-root>

以下是我收到的错误

the selector "app-root" did not match any elements
at DefaultDomRenderer2.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.DefaultDomRenderer2.selectRootElement (platform-browser.js:1073)
at BaseAnimationRenderer.push../node_modules/@angular/platform-browser/fesm5/animations.js.BaseAnimationRenderer.selectRootElement (animations.js:229)
at DebugRenderer2.push../node_modules/@angular/core/fesm5/core.js.DebugRenderer2.selectRootElement (core.js:20837)
at createElement (core.js:17499)
at createViewNodes (core.js:19737)
at createRootView (core.js:19690)
at callWithDebugContext (core.js:20722)
at Object.debugCreateRootView [as createRootView] (core.js:20208)
at ComponentFactory_.push../node_modules/@angular/core/fesm5/core.js.ComponentFactory_.create (core.js:18029)
at ComponentFactoryBoundToModule.push../node_modules/@angular/core/fesm5/core.js.ComponentFactoryBoundToModule.create (core.js:7812) …