英文:
How to run stackblitz project
问题
抱歉关于愚蠢问题的提问。
作为一个Angular初学者（还有StackBlitz），我创建了一个StackBlitz项目，以寻求关于Angular主题（响应式表单）的帮助。
链接
但我无法运行它。
我该怎么做？
谢谢
英文:
Sorry for the stupid question.
Beginner with angular (and stackblitz) I created a stackblitz project to ask for help on an angular subject (reactive forms)
https://stackblitz.com/edit/angular-4vdtbe?file=src%2Fselect%2Fselect.component.ts,src%2Fselect%2Fselect.component.html
But I can't run it.
How can I do that ?
Thanks
答案1
得分: 1
对不起，有很多问题，我刚刚修复了其中一些
-
首先，查看StackBlitz控制台，它可以帮助您查找问题
-
index.html应该包含main.ts组件（具有选择器<my-app>），这就是为什么您需要在index.html中添加<my-app>的原因
<html>
<head>
<title>我的应用</title>
</head>
<body>
<my-app></my-app>
</body>
</html>
- main.ts模板具有默认代码。添加您组件的选择器。导入您的SelectComponent
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';
import { SelectComponent } from './select/select.component';
@Component({
selector: 'my-app',
standalone: true,
imports: [CommonModule, SelectComponent],
template: `
<app-select></app-select>
`,
})
export class App {
name = 'Angular';
}
bootstrapApplication(App);
- select.component.ts，将您的组件设置为独立的，并导入必要的模块
import { CommonModule } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import {
FormArray,
FormBuilder,
FormGroup,
FormsModule,
ReactiveFormsModule,
} from '@angular/forms';
export interface IDocument {
id: string;
label: string;
maxQuantity: number;
}
@Component({
selector: 'app-select',
standalone: true,
imports: [ReactiveFormsModule, FormsModule, CommonModule],
templateUrl: './select.component.html',
styleUrls: ['./select.component.css'],
})
....
5. 修复代码中的其他问题
在这里，有一个演示，在那里我删除了一些有问题的代码，以启动应用程序
https://stackblitz.com/edit/angular-wiskwl?file=src/select/select.component.ts
[1]: https://i.stack.imgur.com/ThVK0.png
<details>
<summary>英文:</summary>
Sorry, there are many issues, i've just fixed some of them
1. First, look at the stackblitz console, it helps you to look for issues
[![Console][1]][1]
2. index.html should have main.ts component(which has selector <my-app>), that's why you need add <my-app> in index.html
```html
<html>
<head>
<title>My app</title>
</head>
<body>
<my-app></my-app>
</body>
</html>
- main.ts template has default code. Add a selector of your component. Import your SelectComponent
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';
import { SelectComponent } from './select/select.component';
@Component({
selector: 'my-app',
standalone: true,
imports: [CommonModule, SelectComponent],
template: `
<app-select></app-select>
`,
})
export class App {
name = 'Angular';
}
bootstrapApplication(App);
- select.component.ts, make your component as standalone and import nessesary modules
import { CommonModule } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import {
FormArray,
FormBuilder,
FormGroup,
FormsModule,
ReactiveFormsModule,
} from '@angular/forms';
export interface IDocument {
id: string;
label: string;
maxQuantity: number;
}
@Component({
selector: 'app-select',
standalone: true,
imports: [ReactiveFormsModule, FormsModule, CommonModule],
templateUrl: './select.component.html',
styleUrls: ['./select.component.css'],
})
....
- Fix other issues, with your code
Here, a demo, there I cut some code(with issues) just to launch the application
https://stackblitz.com/edit/angular-wiskwl?file=src/select/select.component.ts
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论