小编Fra*_*ank的帖子

我只是制作一个通用的降价页面，与项目中的每个人分享设计指南。我想知道如何将我使用的图像硬编码到 .md 文件中。我不想每次都想给某人 .md 文件时共享一个装满图像的文件夹。

将 Markdown 项目硬编码/构建到一个文件中的最佳方法是什么？

一个想法是将所有图像转换为 base64，但这当然不是一个很好的解决方案。另一个想法是将图像托管在某处，但随后它们需要访问互联网，并且图像可能是公开的，因此这也不是解决方案。

我目前的代码：

![placehoder text](images/the-image.jpg)

我在 .md 旁边有一个图像文件夹，该文件夹内有“the-image.jpg”

由于某些原因，我无法在应用程序中显示图像。这是错误，测试和类：

The error: GET http://localhost:4200/assets/image.png 404 (Not Found)

<img class="logo" src="../../assets/image.png">
<img class="logo" src="../assets/image.png">
<img class="logo" src="assets/image.png">
//None of these work

.logo {
    height: 100px;
    width: auto;
    padding: 10px;
    display: block;
    margin: 0 auto;
}

知道为什么这行不通吗？我的image.png位于我的资产文件夹中，该文件夹位于src / assets / image.png。

更新：

因此我们进行了测试。我们将所有节点模块和项目文件复制到另一台PC，并且图像已正确加载。因此，我认为问题出在它本身的角度投影之外。

所以我在理解 eval 如何在打字稿/角度中使用它时遇到了问题。有人可以帮我让评估在这里工作吗？这只是一个演示程序，因此请忽略逻辑没有意义的事实。我只想让 eval 使用动态值更新动态数组。

https://stackblitz.com/edit/angular-pfyt7q?file=src%2Fapp%2Fapp.component.ts

export class AppComponent  {
  arrTest1 = [];
  arrTest2 = [];
  arrTest3 = [];

  constructor() {
    this.TestClass.Run("this.arrTest1 = [1];");
    this.TestClass.Run("this.arrTest2 = [2];");
    this.TestClass.Run("this.arrTest3 = [3];");
    console.log(this.arrTest1);   //Logs: [] (I want: [1])
    console.log(this.arrTest2);   //Logs: [] (I want: [2])
    console.log(this.arrTest3);   //Logs: [] (I want: [3])
  };

  TestClass = {
    Run : (pString) => {
      (0, eval)(pString);
      eval(pString);
    }
  };

}

我试图在启动/初始路线上获取路线参数。但它不起作用。

应用程序组件.ts

  import { ActivatedRoute } from '@angular/router';
  ...

  constructor(
    private activatedroute: ActivatedRoute
  ) {}

  ngOnInit() {
    console.log(this.activatedroute.snapshot.paramMap.get('token'));

    this.activatedroute.paramMap.subscribe( paramMap => {
      console.log(paramMap.get('token'));
    });
  }

app.module.ts（不过不仅仅包括这个）

import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: ':token', component: HelloComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

然后我提供我的应用程序并转到：

http://本地主机:4200/123

但我的 app.component.ts 只是 console.log 的null null。为什么这不起作用？我觉得我一切都正确。这是一个可以使用的 Angular Blitz： https: //stackblitz.com/edit/angular-wnrrkd

我的应用程序中有一个进度条，它使用 while 循环进行更新。我可以成功地更改每个循环的更新进度值，但视图仅在整个 while 循环完成后更新。有什么方法可以在 while 循环中添加一些内容，例如每个循环上的“ForceViewUpdate()”或类似的内容？

在此处检查我的示例并打开控制台以查看正在更新的值： https://stackblitz.com/edit/angular-5zlja4 ?file=app%2Fapp.component.ts

我想知道是否可以从JSON数据创建动态HTML表.列和标头的数量应根据JSON中的键进行更改.例如,这个JSON应该创建这个表:

{
     color: "green", code: "#JSH810"
 }

 ,
 {
     color: "red", code: "#HF59LD"
 }

 ...

这个JSON应该创建这个表:

{
    id: "1", type: "bus", make: "VW", color: "white"
}

,
{
    id: "2", type: "taxi", make: "BMW", color: "blue"
}

...

这必须是100%动态,因为我想显示数百个不同的JSON对象,因此HTML页面中不应对任何内容进行硬编码.

我只想了解诺言和等待如何共同努力。看下面的代码：

console.log("One: Started");
setTimeout(function(){console.log("One: Completed")}, 1000);
console.log("Two: Started");
setTimeout(function(){console.log("Two: Completed")}, 2000);
console.log("Three: Started");
setTimeout(function(){console.log("Three: Completed")}, 3000);

因此，这当然会记录：

One: Started
Two: Started
Three: Started
One: Completed
Two: Completed
Three: Completed

我想在下一个开始之前完成一个。我以对诺言的理解和等待的方式写了这篇文章，但这是行不通的。有人可以尝试编辑此代码以使其正常工作。在我试图理解承诺并等待时，请提供一个解释

async function LogAll() {
    console.log("One: Started");
    await function() {
        return new Promise((resolve, reject) => {
            setTimeout(function(){
                console.log("One: Completed");
                resolve();
            }, 1000);
        });
    }
    console.log("Two: Started");
    await function() {
        return new Promise((resolve, reject) => {
            setTimeout(function(){
                console.log("Two: Completed");
                resolve();
            }, 2000);
        });
    }
    console.log("Three: Started");
    await function() { …

我正在努力了解在使用对象时如何使用 Angular Material Autocomplete。我基本上遵循了 Angular Docs，只是用一个选项对象替换了选项数组，但我不确定如何让它工作。介意看看这里吗？如果它在其他地方有很多答案，我将删除该问题。

这是我的 html 和 ts 组件。所有的进口和一切都是正确的，所以我没有展示任何这些。

<mat-form-field>
  <input matInput [formControl]="myControl" [matAutocomplete]="auto">
  <mat-autocomplete #auto="matAutocomplete">
    <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
      {{ option }}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

  ###############################

  myControl: FormControl = new FormControl();
  filteredOptions: Observable<string[]>;

  options = [
    {color: 'One'},
    {color: 'Two'},
    {color: 'Three'},
  ];

  ngOnInit() {
    this.filteredOptions = this.myControl.valueChanges
      .pipe(
        startWith(''),
        map(val => this.filter(val))
      );
  }

  filter(val: string): string[] {
    return this.options.filter(option =>
      option.toLowerCase().includes(val.toLowerCase()));
  }

我只是想了解Promises和Await是如何工作的.
我希望通过1, 2, 3以该顺序登录来解决此问题.目前它记录1, 3, 2.

我知道Promise在这里没有意义,但在我的程序中它有其他用途,所以需要留下来.从Caller功能到Test需要留下的路线(如果需要你可以改变这些但只是知道他们在那里是有原因的)

我的问题是如何等待Caller函数解决？

这是我的代码:

function Test() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('2');
      resolve();
    }, 2000);
  })
}

function Caller() {
  Test();
}

console.log('1');
Caller();
console.log('3');

我已经尝试了我所理解的,即使Caller()函数等待Test Promise,但这当然使得Caller()函数异步,因此我们仍然得到1,3,2

async function Caller() {
    await Test();
}

是否有一些方法可以使用await而不使函数异步？

因此，Angular Material有两种主要的调用SnackBar的方法。一种方法是调用基本的默认SnackBar：

snackbar.open('Message archived', 'Undo', {
  duration: 3000
});

另一种方法是将组件称为SnackBar：

snackbar.openFromComponent(MessageArchivedComponent, {
  data: 'some data'
});

现在我的问题是，如何调用基本'Undo'按钮（不使用组件）却没有按钮。我可以做这个：

snackBar.open('Message archived');

但是，如何调整持续时间和所有其他属性？

https://material.angular.io/components/snack-bar/overview