标签: angular8

在我的 angular 应用程序中，我无法使用以下命令导入 Observables -

import { Observable } from 'rxjs/Observable';

面对以下错误 -

ERROR in node_modules/rxjs/Observable.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Observable'.
node_modules/rxjs/Rx.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat'.
src/app/home/home.component.ts(2,10): error TS2305: Module '"../../../node_modules/rxjs/Observable"' has no exported member 'Observable'

任何人都可以提出一些答案吗？

我是角度框架的新手。我正在使用 angular 8。

我正在使用布局来显示几页。其中标题包含在布局中，页面内容也包含在布局中。现在我想显示标题，它将由页面内容提供并显示在标题中。我该怎么做？

下面是路线：

这是我的布局

这是我的标题

这是我的看法

我正在使用一个外部面板组件，它将在单击按钮时打开。它具有默认宽度和其他样式属性。有什么方法可以覆盖面板的宽度并用作响应式面板。我想要实现的是以编程方式更改我的组件中面板的宽度。例如，在我的 app.component.html iam 中使用 app.component.html 中的面板容器

panel-container

我如何附加自定义类面板容器类 =“面板宽度”

in.css .panel-width{ 宽度：500 px }

不改变角度默认视图封装

我已经实现了一个小吃店，当用户登录时，无论登录成功还是不成功，他/她都会从小吃店收到通知。在我的实现中，小吃店出现，用户可以点击关闭，小吃店就会消失。如何自动关闭小吃店？

  onSubmit() {
    this.isLoggedInError = true;
    // console.log(this.username);
    this.userService.login(this.username, this.password)
      .subscribe((res: any) => {
        // console.log(res);
        this.isLoggedInError = false;
        // console.log("HERE IS THE res")
        // console.log(res.token);
        // this.logInresponsePayload = res;
        // localStorage.setItem('username', res.username);
        localStorage.setItem('userToken', res.token);

        localStorage.setItem('userRoles', res.roles_list);
        // this.router.navigate(['/dashboard']);
        // console.log(res.token);

        // console.log(res.status_code);

        // Add ROLES : Predefine roles  add check 
        if (res.token === null ) {
          const  message = 'Wrong credentials provided!';
          this.snackbar.open(message, 'Dismiss');
          // this.router.navigate(['/']);

          // this.router.navigate(['/dashboard']);
        } else {
          // console.log("print 200")
          const msg = 'Login successfull!'; …

我在 angular 的 html 中看到了其中一些语法，并想知道它是什么。

<label>{{header?.title}}</label>

谁能告诉我？

使用带有 angular v8 的 service worker 时，我总是遇到如下错误，这在 v7 中没有发生

下面是我的配置

包.json

    "@angular/animations": "~8.2.14",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/pwa": "^0.900.2",
    "@angular/router": "~8.2.14",
    "@angular/service-worker": "~8.2.14",

angular.json

"assets": [
    "src/assets/favicon.ico",
    "src/assets",
    "src/manifest.json"
],
"configurations": {
    "production": {
        // other is ommitted
        "serviceWorker": true,
        "ngswConfigPath": "ngsw-config.json"
    }
}

ngsw-config.json

{
    "$schema": "./node_modules/@angular/service-worker/config/schema.json",
    "index": "/index.html",
    "assetGroups": [
      {
        "name": "app",
        "installMode": "prefetch",
        "resources": {
          "files": [
            "/assets/favicon.ico",
            "/manifest.json",
            "/*.css",
            "/*.js"
          ]
        }
      }, {
        "name": "assets",
        "installMode": …

这是我的组件中的方法：

onDelete(s) {
    const conf = confirm('etes vous sur');
    if (conf) {
         console.log(s._links.self.href);
      this.catservice.Deleteprod(s._links.self.href).subscribe(data => {console.log(s._links.self.href);
      }, error1 => {
        console.log(error1);
      });
    }
  }

这是我服务中的方法：

  public Deleteprod(url) {
    return this.httpClient.delete(url);
  }

我想删除这个对象，s._links.self.href所以这url没有错，但是当我尝试websecurityconfig使用她尝试过的方法创建类时遇到了这个问题，@CrossOrigin(origins = "*")但没有解决方案，请帮助我。

这是我的错误：

Access to XMLHttpRequest at 'http://localhost:8080/offres/24' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我有一个使用“*ngFor”循环显示的对象数组，当我调用 array.sort() 时，数组内部发生变化，元素的位置/顺序发生变化，但 angular 没有检测到变化，也没有t 重新触发“ngFor”循环。调用排序函数后如何更新我的用户界面。

此代码仅用于比较日期。我也想比较时间。任何人都可以为 angular 8 解决方案提供正确的解决方案吗？

 {headerName: 'Start Date', field: 'CreatedDate', sortable:true,
          cellRenderer: (data) => {
            return data.value ? (new Date(data.value)).toLocaleDateString() : '';
         }, comparator: dateComparator}

function dateComparator(date1, date2) {
  var date1Number = monthToComparableNumber(date1);
  var date2Number = monthToComparableNumber(date2);
  if (date1Number === null && date2Number === null) {
    return 0;
  }
  if (date1Number === null) {
    return -1;
  }
  if (date2Number === null) {
    return 1;
  }
  return date1Number - date2Number;
}
function monthToComparableNumber(date) {
  if (date === undefined || date === null …

尝试使用 crypto-js 加密和解密 json 数据。但不工作。如何找到解决方案。如果有人知道，请帮助找到解决方案。

演示：https : //stackblitz.com/edit/angular-ivy-nwhkgz?file=src%2Fapp%2Fapp.component.ts

storageData=
[

  {

  "customerInfo": { 
    "Micheal": 1,
    "Milson": 2 
  },

  "mycart": {
    "Ol1": 1,
    "Ol3": 1
  },


  "cartItemsList": [
    {
      "pid": "Ol1",
      "name": "Avacota",
      "qty": 1 
    },
    {
      "pid": "Ol3",
      "name": "Kaliflower",
      "qty": 1 
    }
  ],
  
  "cartTotal": 2

  }

  ];
 
ngOnInit(){

//Encrypt Info
this.encryptInfo = encodeURIComponent(CryptoJS.AES.encrypt(this.storageData, 'secret key 123').toString());

console.log("encryptInfo");
console.log(this.encryptInfo);


//Decrypt Info
var deData= CryptoJS.AES.decrypt(this.encryptInfo, 'secret key 123'); 
this.decryptedInfo = decodeURIComponent(deData.toString(CryptoJS.enc.Utf8));   

console.log("decryptedInfo");
console.log(this.decryptedInfo);

}