我正在研究使用 Angular 在我的模板中执行条件的最佳方法。我的目标是避免不必要的渲染和函数调用。
我注意到，如果我的模板中有一个函数来检查某些内容并将其返回到我的模板，那么这是错误的，因为当我有一些状态更改时，每次我执行某些操作时都会再次调用该函数。例如，
<div *ngFor="let user of users">
<h3>{{ getUserRole(user.id) }}</h3>
</div>
在我的 TS 中：
getUserRole(id: number) {
if (id === 0) {
return 'Teacher'
} else if (id === 1) {
return 'Study'
}
}
每次我在页面上执行操作时都会调用此函数。避免这种情况的一种替代方法是使用“纯管道”。
我想知道当我在模板中使用三元条件时是否也会发生这种情况。例如，
<div *ngFor="let user of users">
<h3>{{ user.id === 0 ? 'Teacher' : 'Study' }}</h3>
</div>
如果也出现这种情况，什么时候需要使用管道？在所有情况下，我需要使用像示例这样的条件来渲染某些内容，或者仅当我的条件太重量级时（包含许多对象和属性的数组）？
我正在尝试使用axios 使用反应查询突变，但是当我的请求返回 http 错误时，我catch()没有被调用。
这是我尝试过的：
const BannerRightConfirmEmail = () => {
const [{ token }] = useState<ITokenConfirmationEmailParam>(useParams());
const [mutateConfirmEmail] = useMutation(confirmEmailUser);
useEffect(() => {
confirmEmail();
}, []);
const confirmEmail = async () => {
try {
await mutateConfirmEmail(token);
} catch (errorReq) {
console.log(errorReq);
}
};
我的user.service.ts：
const confirmEmailUser = async (token: string) => {
await api.patch('/users/confirmEmail/' + token)
}
export { confirmEmailUser }
我的 api.ts：
const api = axios.create({
baseURL: "http://localhost:3100",
});
我的请求返回 400 …
我正在尝试创建一个Web 组件 button，但是当我将其添加到 HTML 中时，该constructor()函数永远不会被调用。
class MyButton extends HTMLButtonElement {
title = "";
constructor({ title }) {
super();
this.title = title;
this.addEventListener("click", (e) => this.rippe(e.offsetX, e.offsetY));
}
rippe(x, y) {
let div = document.createElement("div");
div.classList.add("ripple");
this.appendChild(div);
div.style.top = `${y - div.clientHeight / 2} px`;
div.style.left = `${x - div.clientWidth / 2} px`;
div.style.backgroundColor = "currentColor";
div.classList.add("run");
div.addEventListener("transitioned", (e) => div.remove());
}
connectedCallback() {
this.innerHTML = this.title;
}
}
window.customElements.define("my-button", MyButton, { extends: "button" });my-button { …我有一个选择，我需要放置一个默认选择选项，但它没有显示在我的模板中。
我试过：
<div class="select">
<select (change)="calculaMes(mesEscolhido)" [(ngModel)]="mesEscolhido" name="selectMesEscolhido"
class="select-text">
<option class="dropdown-item" disabled selected value>Teste</option>
<option [hidden]="datasComMovimentacoes[x].data == mesEscolhido" *ngFor="let mes of datasComMovimentacoes;let x = index"
class="dropdown-item">{{mes.data}}</option>
</select>
<span class="select-highlight"></span>
<span class="select-bar"></span>
</div>
我不相信这是由我的 css 引起的，但是，这是我的 css：
.select {
font-family:
'Roboto','Helvetica','Arial',sans-serif;
position: relative;
width: 100%;
margin-top: 5%;
font-size: 18px;
color: #757575!important;
}
.select-text {
margin-top: 10%;
position: relative;
font-family: inherit;
background-color: transparent;
color: #757575!important;
width: 100%;
font-size: 18px;
border-radius: 0;
border: none;
border-bottom: 1px solid rgba(0,0,0, 0.12);
}
/* Remove focus …我试图覆盖步进材质角度的默认编辑图标，但这不起作用。
我尝试：
<mat-horizontal-stepper [linear]="isLinear" #stepper>
<mat-step>
<form>
<ng-template matStepperIcon="edit">
<mat-icon>home</mat-icon>
</ng-template>
...
</mat-horizontal-stepper>
这样，我的结果是：
当步进器处于活动状态/非活动状态时：
https://i.stack.imgur.com/upB0e.png
https://i.stack.imgur.com/tU143.png
我必须做些特别的事情吗？
Stackblitz：单击材料页面。主页图标不在蓝色圆圈内。
我试图在我的路线中获取一个参数，但是当我尝试打印它时，在我的控制台中返回 undefined 。
这是我的路由模块：
const routes: Routes = [
{
path: ':id',
component: ListaDadosPvSelecionadoComponent,
canActivate: [AuthGuard],
},
];
这就是我试图获取参数的方式：
ngOnInit() {
this.activatedRoute.queryParams.subscribe((params) => console.log(params['id']));
}
当我去route/3我的组件被渲染但我得到：
不明确的
为什么？