Estoy tratando de crear una aplicación simple que permita a los usuarios enviar códigos a una base de datos y simplemente mostrarles esos códigos. Mi modelo de base de datos se ve así , donde el texto es el código real que se mostrará. Por alguna razón, no puedo mostrar los códigos en la página web y probablemente sea algo pequeño. Actualmente, no se muestra nada en la página web, pero la prueba API funciona en soapUI
Aquí está mi API para obtener códigos.
router.get("/codes", async(req, res) => { try { Code.find({}, function(err, codes) { if (err) { console.log(err); res.status(501).send({ message: `MongoDB Exception: ${err}`, }); } else { console.log(codes); res.json(codes); } }); } catch (e) { console.log(e); res.status(500).send({ message: `Server Exception: ${e.message}`, }); } });mi esquema de código
let codeSchema = new Schema( { text: { type: String, unique: true, dropDups: true }, }, { collection: "codes" } ); module.exports = mongoose.model("Code", codeSchema);Mi archivo home.ts
export class HomeComponent implements OnInit { codes = new MatTableDataSource<Code>([]); constructor(private http: HttpClient) {} fetchCodes(): void { this.http .get('http://localhost:3000/api/codes') .subscribe((res: Code[]) => { this.codes.data = res; }); } ngOnInit(): void { this.fetchCodes(); console.log(this.codes); } }y mi html
<ng-container matColumnDef="code"> <th mat-header-cell *matHeaderCellDef> Codes </th> <td mat-cell *matCellDef="let code"> {{codes}} </td> </ng-container>Su archivo ts también debe definir las columnas mostradas de esta manera:
displayedColumns: string[] = ['code'];Y su archivo HTML debería ser así:
<table mat-table [dataSource]="codes" class="mat-elevation-z8"> <ng-container matColumnDef="code"> <th mat-header-cell *matHeaderCellDef>Code</th> <td mat-cell *matCellDef="let code"> {{code}} </td> </ng-container> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </table>Lo anterior debería funcionar solo si su API devuelve una matriz de cadenas ex
const codes = ['code1', 'code2', 'code3'];Prueba esto:
<td mat-cell *matCellDef="let code"> {{codes | json}} </td>