Ionic Angular 中的条件表单渲染

Question

我正在尝试使用相同的组件来编辑两个不同类的一些信息，有没有办法让它工作？

组件：

@Component({
  selector: 'live-care-monorepo-editutente',
  standalone: true,
  imports: [CommonModule, IonicModule, FormsModule],
  templateUrl: './editutente.component.html',
  styleUrl: './editutente.component.css',
})
export class EditutenteComponent implements OnInit{
    @Input() user!: UtenteDTO | OperatoreDTO;
    @Input() userType: string;

    constructor(
        private modalController: ModalController,
        public UtentiService: UtentiService,
        public OperatoriService: OperatoriService,
        public CheckTipo: TypeCheckService
        ) { }
    ngOnInit(): void {
        if (this.userType === 'operatore') {
            console.log("operatore")
            this.user as OperatoreDTO;
        } else if (this.userType === 'utente') {
            console.log("utente")
            this.user as UtenteDTO;
        } else {
            // Handle other types or undefined
            console.error('Unsupported user type');
        }
    }
    dismissModal() {
        this.modalController.dismiss();
    }

    saveUser() {
        if (this.userType === 'utente') {
            const utente = this.user as UtenteDTO;
            if (utente.Nome && utente.Cognome && utente.Cellulare && utente.Email) {
                this.UtentiService.ModificaUtente(utente);
                this.dismissModal();
            } else {
                alert('Riempire tutti i campi');
            }
        } else if (this.userType === 'operatore') {
            const operatore = this.user as OperatoreDTO;
            if (operatore.Utente.Nome && operatore.Utente.Cognome && operatore.Utente.Cellulare && operatore.Utente.Email){
                this.UtentiService.ModificaUtente(operatore.Utente);
                this.OperatoriService.ModificaOperatore(operatore);
                this.dismissModal();
            } else {
                alert('Riempire tutti i campi');
            }
        } else if (this.CheckTipo.isPazienteDTO(this.user)) {
            const paziente = this.user as PazienteDTO;
            
        }
    }
}

模板：

<ion-header>
    <ion-toolbar>
        <ng-container *ngIf="CheckTipo.isUtenteDTO(user)">
            <ion-title>Modifica Utente</ion-title>
        </ng-container>
        <ng-container *ngIf="CheckTipo.isOperatoreDTO(user)">
            <ion-title>Modifica Operatore</ion-title>
        </ng-container>
        <ion-buttons slot="end">
            <ion-button (click)="dismissModal()">Chiudi</ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>


<ion-content *ngIf="CheckTipo.isUtenteDTO(user)">
    <ion-list>
        <ion-item >
            <ion-label position="stacked">Nome</ion-label>
            <ion-input type="text" [ngModel]="user.Nome"></ion-input>
        </ion-item>
        <ion-item>
            <ion-label position="stacked">Cognome</ion-label>
            <ion-input type="text" [(ngModel)]="user.Cognome"></ion-input>
        </ion-item>
        
        <ion-item>
            <ion-label position="stacked">Numero di Telefono</ion-label>
            <ion-input type="tel" [(ngModel)]="user.Cellulare" pattern="[0-9]*"></ion-input>
        </ion-item>
        <ion-item>
            <ion-label position="stacked">Email</ion-label>
            <ion-input type="email" [(ngModel)]="user.Email"></ion-input>
        </ion-item>
    </ion-list>

    <ion-button class="btn-anagrafica" (click)="saveUser()">Salva</ion-button>
</ion-content>

<ion-content *ngIf="CheckTipo.isOperatoreDTO(user)">
    <ion-list>
        <ion-item>
            <ion-label position="stacked">Nome</ion-label>
            <ion-input type="text" [ngModel]="user.Utente.Nome"></ion-input>
        </ion-item>
        <ion-item>
            <ion-label position="stacked">Cognome</ion-label>
            <ion-input type="text" [(ngModel)]="user.Utente.Cognome"></ion-input>
        </ion-item>

        <ion-item>
            <ion-label position="stacked">Numero di Telefono</ion-label>
            <ion-input type="tel" [(ngModel)]="user.Utente.Cellulare" pattern="[0-9]*"></ion-input>
        </ion-item>
        <ion-item>
            <ion-label position="stacked">Email</ion-label>
            <ion-input type="email" [(ngModel)]="user.Utente.Email"></ion-input>
        </ion-item>
    </ion-list>

    <ion-button class="btn-anagrafica" (click)="saveUser()">Salva</ion-button>
</ion-content>

类型检查服务：

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

  constructor() { }
    public isUtenteDTO(user: any): user is UtenteDTO {
        return user;
    }

    public isOperatoreDTO(user: any): user is OperatoreDTO {
        return user;
    }

    public isPazienteDTO(user: any): user is PazienteDTO {
        return user;
    }

    public isUtenteDTONew(user: any): user is UtenteDTONew{
        return user;
    }

    public isOperatoreDTONew(user: any): user is OperatoreDTONew{
        return user;
    }
}

传递给组件的信息示例（调用 saveUser 函数时使用哪个路径）：

async editDettagliUtente(user: UtenteDTO) {
        const modal = await this.modalController.create({
            component: EditutenteComponent,
            componentProps: {
                user: user,
                userType: 'utente'
            }
        });

        return await modal.present();
    }

我尝试使用类型检查服务来选择要显示的离子内容块，但它们都会在调用组件时显示，可能是由于 @Input 用户的输入，但我没有看到其他方法可以遵循

Answer 1

Typescript 用于添加类型以帮助最终用户代码，它不是用于检查 html 上的条件，因为当它在浏览器中转换为 javascript 时，类型检查将不起作用！相反，根据实际数据选择条件 (

user

)

Typescript 在某些情况下可能有效，但在某些情况下，它不是可靠的解决方案，而是使用实际数据条件而不是基于类型的条件！

public isUtenteDTO(user: any): user is UtenteDTO {
    return this.userType === 'utente';
}

public isOperatoreDTO(user: any): user is OperatoreDTO {
    return this.userType === 'operatore';
}

public isPazienteDTO(user: any): user is PazienteDTO {
    return this.userType !== 'utente';
}

public isUtenteDTONew(user: any): user is UtenteDTONew{
    // not sure what is the conditional for this, but I hope you get the picture!
    return user;
}

public isOperatoreDTONew(user: any): user is OperatoreDTONew{
    // not sure what is the conditional for this, but I hope you get the picture!
    return user;
}